jQuery Mobile Navigationsleiste
Eine Navbar besteht aus einer Gruppe horizontal angeordneter Links, die typischerweise in einem Header oder Footer enthalten sind.
Standardmäßig werden Links in einer Navbar automatisch zu Buttons (data-role="button" ist nicht erforderlich).
Verwende das Attribut data-role="navbar", um eine Navbar zu definieren:
Beispiel
<div data-role="navbar">
<ul>
<li><a href="../index.html">Startseite</a></li>
<li><a href="../index.html">Seite 2</a></li>
<li><a href="../index.html">Suche</a></li>
</ul>
</div>
</div>
Ausprobieren »
 |
Standardmäßig entspricht die Breite eines Buttons der Breite seines Inhalts. Verwende eine ungeordnete Liste, um die Buttonbreiten gleichmäßig aufzuteilen: 1 Button hat 100 % Breite, 2 Buttons haben jeweils 50 % Breite, 3 Buttons haben jeweils 33,3 % Breite, und so weiter. Wenn du jedoch mehr als 5 Buttons in der Navbar angibst, werden sie auf mehrere Zeilen aufgeteilt (siehe "Weitere Beispiele"). |
|---|
Symbole für Navbar-Buttons
Wir können das Attribut data-icon verwenden, um Icons zu Navbar-Buttons hinzuzufügen:
Das data-icon-Attribut verwendet dieselben Werte wie die CSS-Klassen im Icons-Kapitel. Die CSS-Klassenverwendung ist class="ui-icon-value", die Verwendung des data-icon-Attributs: data-icon="value"。
| Attributwerte | Beschreibung | Icon |
|---|---|---|
| data-icon="home" | Startseite | |
| data-icon="arrow-r" | Pfeil nach rechts | |
| data-icon="search" | Suche |
Eine vollständige Referenz aller jQuery Mobile Button-Icons finden Sie in unseremjQuery Mobile Icons-Referenzhandbuch。
Positionieren von Symbolen
Genau wie bei der Klasse "ui-btn-icon-position" (ausführlich beschrieben im Icons-Kapitel) können Sie die Icon-Position festlegen: oben, rechts, unten oder links.
Die Icon-Position wird am Navbar-Container festgelegt, mithilfe desdata-iconposAttributs, um die Position anzugeben:
| Attributwerte | Beschreibung | Beispiel |
|---|---|---|
| data-iconpos="top" | Icon oben ausgerichtet | Ausprobieren |
| data-iconpos="right" | Symbol nach rechts ausgerichtet | Ausprobieren |
| data-iconpos="bottom" | Symbol nach unten ausgerichtet | Ausprobieren |
| data-iconpos="left" | Symbol nach links ausgerichtet | Ausprobieren |
|
Standardmäßig wird das Symbol von Schaltflächen der Navigationsleiste über dem Text positioniert (data-iconpos="top"). |
|---|
Aktive Schaltfläche
Wenn ein Link in der Navigationsleiste angeklickt wird, erhält er ein ausgewähltes (gedrücktes) Erscheinungsbild.
Wenn Sie dieses Erscheinungsbild wünschen, ohne auf den Link zu klicken, verwenden Sie class="ui-btn-active":
Bei mehreren Seiten möchten Sie vielleicht, dass das ausgewählte Erscheinungsbild jeder Schaltfläche die Seite darstellt, auf der sich der Benutzer gerade befindet. Fügen Sie dazu "ui-state-persist" und "ui-btn-active" zur Klasse des Links hinzu:
Beispiel
Ausprobieren »
Weitere Beispiele
Wie man eine Navigationsleiste in data-role="content" einfügt.
Wie man eine Navigationsleiste in einen Footer einfügt.
Wie man Icons in einer Navigationsleiste innerhalb eines Footers positioniert.
Demonstration von 10 Buttons in einer Navigationsleiste.