JQueryMobile：标题中的下拉菜单答案

【问题标题】：JQueryMobile: Dropdown menus in HeaderJQueryMobile：标题中的下拉菜单
【发布时间】：2012-03-14 18:10:10
【问题描述】：

我正在创建一个JQM webapp，需要在header中添加下拉菜单来实现如下效果

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

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

【问题讨论】：

标签： jquery jquery-plugins jquery-mobile drop-down-menu

【解决方案1】：

这是一个jsFiddle，其中包含我为此编写的代码。

【讨论】：

在 1.7.1 上尝试过，但它不起作用...格式根本无法组合在一起...在机器人上显示 (LG Thrill)。
在我的 Galaxy S CM9 上的 Stock 浏览器和 Chrome 中都能正常工作。

【解决方案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>

【讨论】：

【解决方案3】：

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

【讨论】：

我不能使用选择控件的主要原因是我必须为菜单名称维护一个静态标签。带有选择控件；按钮中的文本不断更新为当前选择的选项。
好的。您应该将其添加到您的问题中，以便其他人可以考虑到这一点。您还可以使用 jQuery 覆盖选择操作，这样下拉菜单中显示的文本实际上不会改变。

【解决方案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>

【讨论】：

这是一个分支。它不包含在 jquery 移动版本中。如果您尝试使用上述任何方法，则需要从 popup-widget 分支获取 jquery 和 jquery mobile javascript 库。
@Mervyn 谢谢，想知道为什么文档中没有说明这是一个分支？
这适用于现在发布的 1.2。刚试了一下。不需要分支。以上评论不再相关。

【解决方案5】：

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

【讨论】：