JQueryMobile：Header中的下拉菜单

Question

我正在创建一个JQM webapp，需要在标题中添加下拉菜单以实现以下效果

----------------------------------
 [Menu1]   Page Title     [Menu2]     
----------------------------------

JQM的下拉小部件的任何示例？

Answer 1

这是我为此写的代码jsFiddle。

Answer 2

在JQuery Mobile 1.3中，有一个针对此问题的内置示例。

http://view.jquerymobile.com/1.3.0/docs/widgets/popup/

<a href="#popupMenu" data-rel="popup" data-role="button" data-inline="true" data-transition="slidedown" data-icon="gear" data-theme="e">Actions...</a>
 <div data-role="popup" id="popupMenu" data-theme="d">
    <ul data-role="listview" data-inset="true" style="min-width:210px;" data-theme="d">
        <li data-role="divider" data-theme="e">Choose an action</li>
        <li><a href="#">View details</a></li>
        <li><a href="#">Edit</a></li>
        <li><a href="#">Disable</a></li>
        <li><a href="#">Delete</a></li>
    </ul>
</div>

Answer 3

有关基于jQuery Mobile的内置选择菜单的示例，请参阅此jsFiddle。我过去不得不做这样的事情......它远非完美，可能无法在所有设备上正确呈现，但在我的情况下它运作正常。

Answer 4

jQuery Mobile 1.2文档提供了一个使用弹出窗口小部件从按钮而不是选择创建菜单的示例：

http://jquerymobile.com/branches/popup-widget/docs/pages/popup/index.html

<a href="#popupMenu" data-rel="popup" data-role="button" data-inline="true" data-transition="fade">Menu</a>

<div data-role="popup" id="popupMenu" data-overlay-theme="b">
    <ul data-role="listview" data-inset="true" style="width:180px;" data-theme="b">
        <li><a data-rel="popup" href="#popupMenuLevel1">Add</a></li>
        <li><a data-rel="popup" href="#popupMenuLevel1">Edit</a></li>
        <li><a data-rel="popup" href="#popupMenuLevel1">Manage</a></li>
        <li><a data-rel="popup" href="#popupMenuLevel1">Delete</a></li>
    </ul>
</div>

<div data-role="popup" id="popupMenuLevel1" data-overlay-theme="b">
    <ul data-role="listview" data-inset="true" style="width:180px;" data-theme="b">
    <li><a data-rel="popup" href="#popupMenuLevel2">Remove</a></li>
    <li><a data-rel="popup" href="#popupMenuLevel2">Undo</a></li>
    <li><a data-rel="popup" href="#popupMenuLevel2">Splice</a></li>
    <li><a data-rel="popup" href="#popupMenuLevel2">Reticulate</a></li>
    </ul>
</div>

<div data-role="popup" id="popupMenuLevel2" data-overlay-theme="b">
    <ul data-role="listview" data-inset="true" style="width:180px;" data-theme="b">
        <li><a href="index.html">Basics</a></li>
        <li><a href="options.html">Options</a></li>
        <li><a href="methods.html">Methods</a></li>
        <li><a href="events.html">Events</a></li>
    </ul>
</div>

Answer 5

您应该在标题栏中设置导航栏网格菜单，例如5个按钮，然后为每个导航栏按钮设置一个带下拉变换的弹出菜单。