Navigationsleiste in jQuery Mobile

Navigationsleiste in jQuery Mobile

Die Navigationsleiste besteht aus einer Gruppe von horizontal angeordneten Links und befindet sich normalerweise innerhalb des Kopfes oder Fußes der Seite.

Standardmäßig werden die Links in der Navigationsleiste automatisch in Buttons umgewandelt (ohne data-role="button").

Verwenden Sie das Attribut data-role="navbar", um die Navigationsleiste zu definieren:

Beispiel

<div data-role="header">
  <div data-role="navbar">
    <ul>
      <li><a href="#anylink">Startseite</a></li>
      <li><a href="#anylink">Seite zwei</a></li>
      <li><a href="#anylink">Suche</a></li>
    </ul>
  </div>
</div>

Selbst ausprobieren

Hinweis:Die Breite des Buttons, standardmäßig, entspricht ihrem Inhalt. Verwenden Sie eine nicht geordnete Liste, um die Buttons gleichmäßig zu teilen: Ein Button beansprucht 100% der Breite, zwei Buttons teilen sich je 50% der Breite, drei Buttons 33,3%, und so weiter. Wenn Sie jedoch in der Navigationsleiste fünf oder mehr Buttons haben, wird er in mehrere Zeilen umgebrochen (siehe "weitere Beispiele" am Ende der Seite).

Aktiver Button

Wenn ein Link in der Navigationsleiste geklickt wird, erhält er das Auswahl-Aussehen (gedrückt).

Um dieses Aussehen ohne das Klicken auf die Verknüpfung zu erreichen, verwenden Sie die Klasse "ui-btn-active":

Beispiel

<li><a href="#anylink" class="ui-btn-active">Startseite</a></li>

Selbst ausprobieren

Für mehrere Seiten müssen Sie möglicherweise für jeden Button das "ausgewählt"-Aussehen einstellen, um anzuzeigen, dass der Benutzer diese Seite durchsucht. Wenn Sie dies tun möchten, fügen Sie der Verknüpfung die Klasse "ui-state-persist" sowie die Klasse "ui-btn-active" hinzu:

Beispiel

<li><a href="#anylink" class="ui-btn-active ui-state-persist">Startseite</a></li>

Selbst ausprobieren

Mehr Beispiele

Navigationsleiste im Inhalt
Wie man eine Navigationsleiste in data-role="content" hinzufügt.
Navigationsleiste im Fußbereich
Wie man eine Navigationsleiste im Fußbereich hinzufügt.
Symbole in der Navigationsleiste positionieren
Wie man Symbole in der Navigationsleiste im Fußbereich platziert.
Fünf oder mehr Buttons
Zehn Buttons in der Navigationsleiste demonstrieren.