jQuery Mobile Navigation Bar

jQuery Mobile Navigation Bar

De navigatielijn bestaat uit een groep horizontaal geplaatste links en bevindt zich meestal binnen de kop of voettekst.

Standaard worden de links in de navigatielijn automatisch omgezet in knoppen (geen data-role="button" nodig).

Gebruik de eigenschap data-role="navbar" om de navigatielijn te definiëren:

voorbeeld

<div data-role="header">
  <div data-role="navbar">
    <ul>
      <li><a href="#anylink">home</a></li>
      <li><a href="#anylink">pagina twee</a></li>
      <li><a href="#anylink">zoeken</a></li>
    </ul>
  </div>
</div>

Try It Yourself

Tip:De breedte van de knoppen is standaard gelijk aan hun inhoud. Gebruik een ongesorteerde lijst om de knoppen gelijkmatig te verdelen: een knop beslaat 100% van de breedte, twee knoppen delen elk 50% van de breedte, drie knoppen 33.3%, enzovoort. Als je echter vijf of meer knoppen in de navigatielijn hebt opgegeven, vouwt het uit naar meerdere regels (zie "Meer voorbeelden" aan de onderkant van de pagina).

Actieve knop

Wanneer een link in de navigatielijn wordt ingedrukt, krijgt deze een geselecteerde uitstraling (ingedrukt).

Als je deze uitstraling wilt realiseren zonder de link te klikken, gebruik dan class="ui-btn-active":

voorbeeld

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

Try It Yourself

Voor meerdere pagina's moet je mogelijk een "geselecteerd"-uitstraling instellen voor elke knop om aan te geven dat de gebruiker deze pagina bekijkt. Als je dit wilt doen, voeg dan de class "ui-state-persist" en de class "ui-btn-active" toe aan de link:

voorbeeld

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

Try It Yourself

More Examples

Navigation bar in the content
How to add a navigation bar in data-role="content".
Navigation bar in the footer
How to add a navigation bar in the footer.
Positioning icons in the navigation bar
How to place icons within the footer navigation bar.
Five or more buttons
Demonstration of ten buttons in the navigation bar.