jQuery Mobile Navigationsleisten
Eine Navigationsleiste besteht aus einer Gruppe von Verbindungen, die horizontal ausgerichtet sind, in der Regel innerhalb einer Kopf- oder Fußzeile:
Die Bar ist als ungeordnete Liste von Links innerhalb eines umhüllten codiert <div> Element, das die hat data-role="navbar" Attribut:
Beispiel
<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>
Versuch es selber " Standardmäßig Links in einer Navigationsleiste schaltet sich automatisch in eine Schaltfläche (keine Notwendigkeit für class="ui-btn" oder data-role="button" ).
Die Tasten sind standardmäßig so breit wie sein Inhalt. Verwenden Sie eine ungeordnete Liste, um die Tasten teilen gleichermaßen: 1-Taste nimmt 100% der Breite, 2 Tasten teilen jeweils 50%, 3 Tasten 33,3% usw. Wenn Sie jedoch mehr als 5 Tasten in der Navigationsleiste angeben, wird es wickeln mehrere Zeilen (siehe "Weitere Beispiele" weiter unten).
Icons in Navigationstasten
Ein Symbol , um Ihre Navigationstaste verwenden , um die Daten-Symbol Attribut hinzu:
Die Daten-Symbol führen die gleichen Werte wie die CSS-Klassen in der "Icons" Kapitel angegeben verwenden. Der einzige Unterschied besteht darin , dass statt eines festen class="ui-icon- value " , können Sie das Attribut festlegen , data-icon=" value " .
| Attributwert | Beschreibung | Symbol |
|---|---|---|
| data-icon="home" | Zuhause | |
| data-icon="arrow-r" | Rechter Pfeil | |
| data-icon="search" | Suche |
Eine vollständige Referenz aller jQuery Mobile Button Icons, gehen Sie bitte auf unsere jQuery Mobile Icons Referenz .
Positionierung Icons
Genau wie mit dem "ui-btn-icon- position " Klasse (im "Icons" Kapitel angegeben), können Sie wählen , wo das Symbol sollte in der Navigationstaste positioniert werden: top, right, bottom oder left .
Das Symbol Position ist auf der navbar Behälter eingestellt - es ist nicht möglich, jede einzelne Taste Link zu positionieren. Verwenden Sie die data-iconpos Attribut die Position angeben:
| Attributwert | Beschreibung | Beispiel |
|---|---|---|
| data-iconpos="top" | Top-Symbol Ausrichtung | Versuch es |
| data-iconpos="right" | Rechtes Icon Ausrichtung | Versuch es |
| data-iconpos="bottom" | Unteres Icon Ausrichtung | Versuch es |
| data-iconpos="left" | Links Symbol Ausrichtung | Versuch es |
Standardmäßig Symbole im Navigationstasten über den Text platziert (data-iconpos="top") .
Aktive Schaltflächen
Wenn ein Link in der Navigationsleiste abgegriffen / geklickt haben, wird es die gewählte (nach unten gedrückt) aussehen.
Um diesen Look zu erzielen , ohne die Verbindung zu tippen, verwenden Sie die class="ui-btn-active" :
Für mehrere Seiten, können Sie die "ausgewählt" Look für jede Taste, die die Seite der Benutzer ist darstellt. Dazu fügen Sie die "ui-state-persist" Klasse Ihren Links, sowie die "ui-btn-active" Klasse:
Beispiel
<li><a href="#anylink"
class="ui-btn-active ui-state-persist" >Home</a></li>
Versuch es selber " Mehr Beispiele
NavBars in Inhalt
Wie eine Navigationsleiste nach innen zu addieren data-role="content" .
NavBars in der Fußzeile
Wie eine Navigationsleiste in der Fußzeile hinzuzufügen.
Mehr als 5 Tasten
Eine Demonstration von 10 Tasten in einer Navigationsleiste