0

我在页面中有一些 html。在页脚上，我希望 Today 和 Refresh 按钮与控件组位于同一行，按钮左右对齐，控件组居中。有没有什么简单的方法可以用 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>
4

2 回答 2

1

这是一个适合您的工作示例：http: //jsfiddle.net/Gajotres/MADn7/

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

另一件事是，控制组必须包裹在水平居中的 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>
于 2012-12-17T19:14:41.223 回答
0

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

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

于 2012-12-17T06:03:12.960 回答