jQuery JQueryMobile：标题中的下拉菜单

JQueryMobile: Dropdown menus in Header

提问by Nirmal Patel

I am creating a JQM webapp and need to add dropdown menu to the header to achieve the following effect

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

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

Any examples of dropdown widgets for JQM?

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

回答by Nirmal Patel

Here's a jsFiddlewith the code I wrote for this.

这是我为此编写的代码的jsFiddle。

回答by Laszlo Lugosi

In JQuery Mobile 1.3 there is a built in sample for this problem.

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

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

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>

回答by Ryan

See this jsFiddlefor a sample based on jQuery Mobile's built-in select menus. I've had to do something like this in the past... it's far from perfect and likely wont render correctly on all devices, but it worked OK in my case.

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

回答by bluescrubbie

The jQuery Mobile 1.2 docs give an example of using the popup widget for creating a menu from a button rather than a select:

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

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

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>

回答by negin51

You should set navbar grid menu with for example 5 buttons in header bar and then set for each of navbar buttons one popup menu with dropdown transation.

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