css - 像 IOS 工具栏一样的 jquerymobile 设计

Question

我知道这是个愚蠢的问题，但我找不到答案我想设计这个。颜色不重要和

我已经做了

这是代码

  <!-- Filter Toolbar -->
            <div data-role="header">
                <div data-role="navbar" data-iconpos="left">
                    <ul>
                        <li><a type="button" id="filterdate" >Date</a></li>
                        <li><a type="button" id="filtermember" class="ui-btn-active">Member</a></li>
                        <li><a type="button" id="filtersubject">Subject</a></li>

                    </ul>
                </div>

            </div>
            <!-- /Filter Toolbar -->
        <div data-role="footer">
                <div data-role="navbar" data-mini="true" data-iconpos="left">
                    <ul>
                        <li> <a href="#"  data-icon="edit">Edit</a></li>

                        <li><a href="#"   data-icon="refresh" data-iconpos="notext">Refresh</a></li>
                        <li>
                            <a href="#" data-role="button" data-icon="arrow-l" data-iconpos="notext" data-theme="a" data-inline="true"></a>

                            <a href="#" data-role="button" data-icon="arrow-r" data-iconpos="notext" data-theme="a" data-inline="true"></a>
                        </li>

                    </ul>
                </div><!-- /navbar -->
            </div><!-- /footer -->

Answer 1

您将不得不弄乱标题按钮组的宽度，但除此之外它看起来像您发布的图片。减去颜色...

<div data-role="header">
    <div data-role="controlgroup" data-type="horizontal">
        <a href="#" data-role="button" class="headerButton">Member</a>
        <a href="#" data-role="button" class="headerButton">Subject</a>
        <label for="select-choice-0" class="select">Date</label>
        <select name="select-choice-0" id="select-choice-0" class="headerButton">
            <option value="1">Option 1</option>
            <option value="2">Option 2</option>
            <option value="3">Option 3</option>
            <option value="4">Option 4</option>
        </select>
    </div>
</div>


<div data-role="footer">
    <div data-role="navbar" data-mini="true" data-iconpos="left">
        <a href="#"  data-icon="edit">Edit</a>
        <div data-role="controlgroup" data-type="horizontal" style="float: right;">
            <a href="#" data-role="button" data-icon="arrow-l" data-iconpos="left" data-theme="a">&nbsp;</a>
            <a data-role="label">1</a>
            <a href="#" data-role="button" data-icon="arrow-r" data-iconpos="right" data-theme="a" data-inline="true">&nbsp;</a>
        </div>
    </div><!-- /navbar -->
</div><!-- /footer -->