Question

我在页面中有一些HTML。在页脚上，我希望“今天”和“刷新”按钮与控件组位于同一行，左右对齐按钮，控制组居中。使用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>

Answer 1

以下是您的工作示例：http://jsfiddle.net/Gajotres/MADn7/

要使其工作，您需要一个jQuery Mobile插件：http://jeromeetienne.github.com/jquery-mobile-960/。这是一个纯css插件，它用于一个非常灵活的网格，然后默认为jQM。

另一件事是，controlgroup必须包含在水平居中的div中。您将在示例中找到所有内容。

<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>

Answer 2

您可以使用布局网格将多个元素放在一行上。

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

jQuery Mobile按钮与控制组位于同一行

2 个答案: