jQuery Mobile Navigationsleiste
Die Navigationsleiste ist eine Reihe von Links horizontal Zusammensetzung angeordnet sind, typischerweise im Kopf oder Schwanz enthalten.
Standardmäßig werden die Links in der Navigationsleiste automatisch die Schaltfläche werden (keine Daten-role = "button").
Mit Hilfe von Daten-role = "navbar" schreiben die Navigationsleiste zu definieren:
Beispiele
<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>
Versuchen »
 | Standardmäßig ist die Breite der Schaltfläche und dessen Inhalt die gleiche. Verwenden Sie eine ungeordnete Liste zu gleichmäßig die Breite der Tasten aufteilen: eine Taste, um 100% der Breite von je zwei Tasten für 50% der Breite einen Anteil von drei Tasten jeweils für 33,3% der Breite entfielen, und so weiter. Wenn Sie jedoch mehr als fünf Tasten in der Navigationsleiste festlegen, wird in mehrere aufgeteilt werden (siehe "Weitere Beispiele"). |
|---|
Symbole Navigationstaste
Wir können die Daten-Symbol-Attribut verwenden Symbole für die Navigationstasten hinzuzufügen:
Daten-Symbol mit der CSS-Klasse Abschnitt des Symbols Attribut den gleichen Wert verwenden. CSS - Klasse zu verwenden class = "ui-icon- Wert" , data-Symbol Attributdaten-Symbol zu verwenden = "Wert".
| Eigenschaft Wert | Beschreibung | Symbol |
|---|---|---|
| Daten-icon = "home" | Zuhause | |
| Daten-Symbol = "Pfeil-r" | Auf der rechten Pfeil | |
| Daten-Symbol = "suchen" | Suche |
Eine vollständige Referenzhandbuch für alle Tastensymbole jQuery Mobile, besuchen Sie unsere jQuery Mobile Symbol - Referenzhandbuch .
Standort icon
Wie "ui-btn-icon- Position" gleichen Kategorie (Symbol Abschnitt werden im Detail beschrieben), können Sie den Speicherort des Icon - Set angezeigt: oben (Kopf), rechts (rechts), unten (unten) oder links (auf der linken Seite ).
Location - Symbol in der Navigationsleiste Behälter vorgesehen ist, unter Verwendung der Daten-iconpos Attribut den Speicherort angeben:
| Eigenschaft Wert | Beschreibung | Beispiele |
|---|---|---|
| Daten-iconpos = "top" | Richten Sie die obere Symbol | versuchen |
| Daten-iconpos = "right" | Icon auf der rechtsbündig | versuchen |
| Daten-iconpos = "bottom" | Richten Sie das untere Symbol | versuchen |
| Daten-iconpos = "left" | Richten Sie die linke Symbol | versuchen |
| Standardmäßig wird das Symbol über der Navigationstasten Text (data-iconpos = "top") befindet. |
|---|
Aktivierungstaste
Wenn ein Link in der Navigationsleiste klicken, wird es ausgewählt (gedrückt) Aussehen erhalten.
Wenn Sie das Aussehen zu erhalten, wollen nicht auf den Link klicken, verwenden Sie class = "ui-btn-aktiv":
Für mehrere Seiten, können Sie das Aussehen der einzelnen Tasten im Namen der aktuellen Seite der Benutzer befindet zu überprüfen. Um dies zu tun, fügen Sie "ui-state-beharren" und "ui-btn-aktiv" Link zur Klasse:
Weitere Beispiele
Inhalt Navigationsleiste
Wie fügen Sie die Navigationsleiste innerhalb der Daten-role = "content".
Hecknavigationsleiste
Wie fügen Sie die Navigationsleiste auf der Rückseite.
Zielsymbol in der Navigationsleiste
Wie die Navigationsleiste Symbol in den Schwanz zu lokalisieren.
Mehr als fünf Tasten
10 Demo-Button in der Navigationsleiste.