Bar jQuery Mobile Navigation
Una barra di navigazione è composta da un gruppo di collegamenti che sono allineati in orizzontale, in genere entro un'intestazione o piè di pagina:
Il bar è codificato come una lista non ordinata di link avvolto all'interno di un <div> elemento che ha il data-role="navbar" attributo:
Esempio
<div data-role="header">
<div data-role="navbar" >
<ul>
<li><a href="#anylink">Home</a></li>
<li><a href="#anylink">Page Two</a></li>
<li><a href="#anylink">Search</a></li>
</ul>
</div>
</div>
Prova tu stesso " Per impostazione predefinita, i collegamenti all'interno di una barra di navigazione si trasformerà automaticamente in un pulsante (senza bisogno di class="ui-btn" o data-role="button" ).
I pulsanti sono, per impostazione predefinita, larga quanto il suo contenuto. Utilizzare una lista non ordinata di dividere i pulsanti altrettanto: 1 pulsante prende il 100% della larghezza, 2 bottoni quota del 50% ciascuno, 3 bottoni 33,3%, ecc, tuttavia, se si specifica più di 5 pulsanti nella barra di navigazione, che andrà a capo di più linee (vedere "Altre Esempi" di seguito).
Icone in Pulsanti di navigazione
Per aggiungere un'icona per il pulsante di navigazione, utilizzare l'attributo data-icona:
L'icona-dati degli attributi utilizzare gli stessi valori come le classi CSS specificate nel capitolo "Icone". L'unica differenza è che, invece di specificare class="ui-icon- value " , si specifica l'attributo di data-icon=" value " .
| Attributo Valore | Descrizione | Icona |
|---|---|---|
| data-icon="home" | Casa | |
| data-icon="arrow-r" | Freccia destra | |
| data-icon="search" | Ricerca |
Per un riferimento completo di tutte le icone dei pulsanti jQuery Mobile, si prega di visitare il nostro jQuery Mobile icone di riferimento .
posizionamento Icone
Proprio come con la "ui-btn-icon- position " class (specificato nel capitolo "Icons"), è possibile scegliere dove l'icona deve essere posizionato il pulsante di navigazione: top, right, bottom o left .
La posizione delle icone vengono impostate sul contenitore navbar - non è possibile posizionare ogni singolo collegamento pulsante. Utilizzare il data-iconpos attributo per specificare la posizione:
| Attributo Valore | Descrizione | Esempio |
|---|---|---|
| data-iconpos="top" | allineamento Icona in alto | Provalo |
| data-iconpos="right" | allineamento icona a destra | Provalo |
| data-iconpos="bottom" | allineamento icona in basso | Provalo |
| data-iconpos="left" | allineamento icona a sinistra | Provalo |
Per impostazione predefinita, le icone di pulsanti di navigazione sono posizionati sopra il testo (data-iconpos="top") .
pulsanti attivi
Quando un link nella barra di navigazione è sfruttato / cliccato, si ottiene il selezionato (premuto) cerca.
Per ottenere questo look, senza dover toccare il collegamento, utilizzare la class="ui-btn-active" :
Per di più pagine, si potrebbe desiderare l'aspetto "selezionato" per ogni pulsante che rappresenta la pagina che l'utente è attivo. Per fare ciò, aggiungere il "ui-state-persist" classe per il vostro link, così come il "ui-btn-active" class:
Esempio
<li><a href="#anylink"
class="ui-btn-active ui-state-persist" >Home</a></li>
Prova tu stesso " Altri esempi
Navbars nel contenuto
Come aggiungere una barra di navigazione all'interno di data-role="content" .
Navbars a piè di pagina
Come aggiungere una barra di navigazione all'interno del piè di pagina.
Più di 5 pulsanti
Una dimostrazione di 10 pulsanti in una barra di navigazione