jQuery de navigare mobile Baruri
Bara de navigare constă dintr-un grup de link-uri, care sunt aliniate orizontal, în mod obișnuit într-un antet sau subsol:
Bara este codificată ca o listă neordonată înfășurat într - un <div> element care are data-role="navbar" de data-role="navbar" atribut:
Exemplu
<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>
Încearcă - l singur » În mod implicit, link - uri în interiorul unei bare de navigare se va transforma automat într - un buton (nu este nevoie de class="ui-btn" sau data-role="button" ).
Butoanele sunt, în mod implicit, la fel de lată ca și conținutul său. Utilizați o listă neordonată pentru a împărți în mod egal butoanele: 1 buton ia 100% din lățimea, 2 butoane partaja 50% fiecare, 3 butoane de 33,3%, etc Cu toate acestea, dacă specificați mai mult de 5 butoane în bara de navigare, se va încheia la mai multe linii ( a se vedea "More Examples" de mai jos).
Pictogramele din butoane de navigare
Pentru a adăuga o pictogramă buton de navigare, utilizați data-icon atributului:
data-icon de "Icons" data-icon atribut folosesc aceleași valori ca și clasele CSS specificate în "Icons" capitol. Singura diferență este că, în loc să specificați class="ui-icon- value " , specificați atributul de data-icon=" value " .
| Valoare atribut | Descriere | icoană |
|---|---|---|
| data-icon="home" | Acasă | |
| data-icon="arrow-r" | Sageata dreapta | |
| data-icon="search" | Căutare |
Pentru o referință completă a tuturor butoanelor pictogramele jQuery Mobile, vă rugăm să mergeți la noastre jQuery Icoane mobile de referință .
Poziționarea Icoane
La fel ca și cu "ui-btn-icon- position " clasa (specificată în "Icons" capitol), puteți alege în cazul în care pictograma trebuie să fie poziționat în butonul de navigare: top, right, bottom sau la left .
Poziția pictogramei este setată pe container navbar - nu este posibil să se poziționeze fiecare link buton individuale. Utilizați data-iconpos atributul pentru a specifica poziția:
| Valoare atribut | Descriere | Exemplu |
|---|---|---|
| data-iconpos="top" | Pictograma aliniere Sus | Incearca-l |
| data-iconpos="right" | Pictograma de aliniere dreapta | Incearca-l |
| data-iconpos="bottom" | Pictograma aliniere de jos | Incearca-l |
| data-iconpos="left" | Stânga pictograma de aliniere | Incearca-l |
În mod implicit, pictogramele din butoane de navigare sunt plasate deasupra textului (data-iconpos="top") .
Butoane active
Când un link în bara de navigare este exploatat / apasat, acesta devine selectat (pressed down) în (pressed down) uite.
Pentru a realiza acest aspect , fără a fi nevoie să apăsați pe link - ul, folosiți class="ui-btn-active" :
Pentru mai multe pagini, este posibil să doriți ca "selected" look pentru fiecare buton care reprezintă pagina se află utilizatorul. Pentru a face acest lucru, adăugați "ui-state-persist" clasa de la link - urile dvs., precum și "ui-btn-active" clasă:
Exemplu
<li><a href="#anylink"
class="ui-btn-active ui-state-persist" >Home</a></li>
Încearcă - l singur » Mai multe exemple
Navbars în conținut
Cum se adaugă o bară de navigare în interiorul data-role="content" .
Navbars în subsol
Cum se adaugă o bară de navigare în interiorul subsol.
Mai mult de 5 butoane
O demonstrație de 10 butoane de navigare într-un bar