sto creando una webapp jQm e bisogno di aggiungere menu a discesa per l'intestazione per ottenere il seguente effettoJQueryMobile: menu a discesa nella intestazione
----------------------------------
[Menu1] Page Title [Menu2]
----------------------------------
Eventuali esempi di widget a discesa per jQm?
Ecco un jsFiddle con il codice che ho scritto per questo.
Vedere questo jsFiddle per un esempio basato sui menu di selezione incorporati di jQuery Mobile. Ho dovuto fare qualcosa del genere in passato ... è tutt'altro che perfetto e probabilmente non funzionerà correttamente su tutti i dispositivi, ma ha funzionato bene nel mio caso.
Il motivo principale per cui non è possibile utilizzare un controllo di selezione è che devo mantenere un'etichetta statica per il nome del menu. Con un controllo selezionato; il testo nel pulsante continua ad aggiornare all'opzione attualmente selezionata. –
Ok. Dovresti aggiungerlo alla tua domanda in modo che altri possano tenerne conto. Puoi anche eseguire l'override dell'azione di selezione con jQuery in modo che il testo visualizzato nel menu a discesa non cambi in realtà. – Ryan
I jQuery Mobile 1.2 docs dare un esempio di utilizzo del widget a comparsa per la creazione di un menu da un pulsante, piuttosto che un prescelto:
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>
Questo è un ramo. Non è incluso nelle versioni di jquery per dispositivi mobili. Se si tenta di utilizzare uno dei precedenti, sarà necessario disporre delle librerie javascript jQuery e jQuery mobili dal ramo del popup-widget. – Mervyn
@Mervyn Grazie, mi chiedo perché non è indicato nei documenti che si tratta di un ramo? – Bula
Questo funziona in 1.2 come rilasciato in questo momento. Ho appena provato. Nessun ramo necessario Il commento di cui sopra non è più pertinente. – scottheckel
In jQuery Mobile 1.3 c'è un esempio integrato per questo problema.
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>
È necessario impostare menu a griglia barra di navigazione, ad esempio con 5 pulsanti nella barra del titolo e poi fissati per ciascuno dei pulsanti della barra di navigazione un menu con discesa transation.
ha provato questo su 1.7.1 e non funziona ... la formattazione non si avvicina affatto ... lo stava visualizzando su un droide (LG Thrill). – ppetree
Funziona bene sia nel browser Stock che in Chrome sul mio Galaxy S CM9. –