JQueryMobile: выпадающие меню в заголовке

Question

Я создаю веб-приложение JQM и мне нужно добавить выпадающее меню в заголовок, чтобы добиться следующего эффекта

----------------------------------
 [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

См. jsFiddle для примера, основанного на встроенных меню выбора jQuery Mobile.Я должен был сделать что-то подобное в прошлом ... это далеко не идеально и, вероятно, не будет правильно отображаться на всех устройствах, но в моем случае это работало нормально.

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 кнопками в строке заголовка, а затем для каждой из кнопок навигационной панели установить одно всплывающее меню с переходом из выпадающего меню.