jQuery Mobile barra di navigazione
Barra di navigazione è un insieme di collegamenti disposti orizzontalmente composizione, in genere contenuta all'interno della testa o la coda.
Per impostazione predefinita, i collegamenti nella barra di navigazione diventerà automaticamente il pulsante (nessun dato-role = "tasto").
Utilizzando i dati-role = "barra di navigazione" attribuire a definire la barra di navigazione:
Esempi
<div data-role="navbar" >
<ul>
<li><a href="#anylink">首页</a></li>
<li><a href="#anylink">页面二</a></li>
<li><a href="#anylink">搜索</a></li>
</ul>
</div>
</div>
Prova »
 | Per default, la larghezza del pulsante e il contenuto della stessa. Utilizzare un elenco non ordinato di dividere equamente la larghezza di pulsanti: un pulsante per il 100% della larghezza di due pulsanti ciascuno il 50% della larghezza di tre pulsanti ciascuno il 33,3% della larghezza, e così via. Tuttavia, se si specifica più di cinque pulsanti nella barra di navigazione sarà diviso in più righe (Vedere "Altri esempi"). |
|---|
pulsante di navigazione Icone
Siamo in grado di utilizzare l'attributo data-icona per aggiungere le icone per i pulsanti di navigazione:
dati di attributo-icona con la sezione di classe CSS dell'icona utilizzando lo stesso valore. classe CSS da utilizzare class = "valore ui-icon-" , dati-icona di attribuire a utilizzare i dati-icon = "valore".
| Proprietà Valore | descrizione | icona |
|---|---|---|
| Dati-icon = "casa" | casa | |
| Dati-icon = "freccia-R" | Sulla freccia destra | |
| Dati-icon = "ricerca" | ricerca |
Per un manuale di riferimento completo per tutte le icone dei pulsanti jQuery Mobile, visitare il nostro jQuery Mobile Manuale icona di riferimento .
Località icona
Come "posizione ui-btn-icon-" stessa categoria (sezione icone sono descritte in dettaglio), è possibile impostare la posizione dell'icona visualizzata: superiore (testa), a destra (a destra), in basso (in basso) oa sinistra (a sinistra ).
Location icona sulla barra di navigazione del contenitore è previsto, utilizzando solo i dati iconpos attributo per specificare la posizione:
| Proprietà Valore | descrizione | Esempi |
|---|---|---|
| data-iconpos = "top" | Allineare l'icona in alto | provare |
| data-iconpos = "right" | Icona sulla allineato a destra | provare |
| data-iconpos = "bottom" | Allineare l'icona in basso | provare |
| data-iconpos = "left" | Allineare l'icona sinistra | provare |
| Per impostazione predefinita, l'icona si trova sopra il testo pulsanti di navigazione (data-iconpos = "top"). |
|---|
pulsante di attivazione
Quando un collegamento sulla barra di navigazione viene cliccato, sarà selezionato (premuto) aspetto.
Se si desidera ottenere questo aspetto non fare clic sul collegamento, usare class = "ui-btn-attivo":
Per di più pagine, si consiglia di controllare l'aspetto di ogni pulsante per conto della pagina corrente l'utente si trova. Per fare questo, aggiungere link "ui-btn-attivo" alla classe "ui-stato-persistono" e:
Altri esempi
barra di navigazione dei contenuti
Come si fa ad aggiungere la barra di navigazione all'interno del data-role = "content".
Coda barra di navigazione
Come si fa ad aggiungere la barra di navigazione nella parte posteriore.
icona di destinazione nella barra di navigazione
Come individuare l'icona barra di navigazione nella coda.
Più di cinque pulsanti
Pulsante 10 Demo nella barra di navigazione.