jQuery Mobile buttons on same row as controlgroup

问题

I have some html in a page. On the footer I want the Today and Refresh buttons to be on the same line as the control group, with the buttons left and right aligned and the controlgroup centered. Is there any easy way to do this with jQuery Mobile?

    <div data-role="page" id="display_appointments">
        <div data-theme="a" data-role="header">
            <a href="#" data-icon="delete">Menu</a>
            <h3>
                Appointments
            </h3>
            <a href="#" data-icon="delete">Add</a>
        </div>

        <div data-role="content">
            Appointments here
        </div>

        <div data-theme="a" data-role="footer" data-position="fixed">
            <a href="#display_appointments" data-role="button">Today</a>
            <div data-role="controlgroup" data-type="horizontal">
                <a href="#display_appointments" data-role="button">Day</a>
                <a href="#display_appointments_list" data-role="button">List</a>
                <a href="#display_appointments_month" data-role="button">Month</a>
            </div>
            <a href="#display_appointments" data-role="button">Refresh</a>
        </div>
</div>

回答1:

Here's an working example for you: http://jsfiddle.net/Gajotres/MADn7/

To make it work you need a jQuery Mobile plugin: http://jeromeetienne.github.com/jquery-mobile-960/. This is a pure css plugin and it is used for a much flexible grid then default jQM one.

Another thing is, controlgroup must be wrapped in horizontally centered div. You will find everything in example.

<fieldset class="container_12">
    <div class="grid_2">
        <a href="#display_appointments" data-role="button">Today</a>        
    </div>
    <div class="grid_8">
        <div id="justify-div">
            <div data-role="controlgroup" data-type="horizontal">
                <a href="#display_appointments" data-role="button">Day</a>
                <a href="#display_appointments_list" data-role="button">List</a>
                <a href="#display_appointments_month" data-role="button">Month</a>
            </div>
        </div>
    </div>       
    <div class="grid_2">
        <a href="#display_appointments" data-role="button">Refresh</a>        
    </div>       
</fieldset>

回答2:

You can use the layout grids to put multiple elements on a single line.

http://jquerymobile.com/demos/1.2.0/docs/content/content-grids.html

来源：https://stackoverflow.com/questions/13908906/jquery-mobile-buttons-on-same-row-as-controlgroup

标签

jquery

jquery-mobile