与控件组在同一行的jQuery Mobile按钮 [英] jQuery Mobile buttons on same row as controlgroup

问题描述

我在页面中有一些html.在页脚上，我希望今日"和刷新"按钮与控制组在同一行，左右按钮对齐并且控制组居中.有没有简单的方法可以用jQuery Mobile做到这一点?

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>

推荐答案

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

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

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

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.

另一件事是，控制组必须包装在水平居中的div中.您将在示例中找到所有内容.

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>

这篇关于与控件组在同一行的jQuery Mobile按钮的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！