Barres de navigation jQuery Mobile

Barres de navigation jQuery Mobile

La barre de navigation est composée d'un ensemble de liens alignés horizontalement, généralement situés à l'intérieur de l'en-tête ou du pied de page.

Par défaut, les liens dans la barre de navigation sont automatiquement convertis en boutons (sans data-role="button").

Utilisez l'attribut data-role="navbar" pour définir la barre de navigation :

Exemple

<div data-role="header">
  <div data-role="navbar">
    <ul>
      <li><a href="#anylink">Page d'accueil</a></li>
      <li><a href="#anylink">Page deux</a></li>
      <li><a href="#anylink">Recherche</a></li>
    </ul>
  </div>
</div>

Essayez-le vous-même

Astuce :La largeur du bouton, par défaut, est identique à son contenu. Utilisez une liste non ordonnée pour diviser équitablement les boutons : un bouton occupe 100% de la largeur, deux boutons partagent chacun 50% de la largeur, trois boutons 33.3%, et ainsi de suite. Cependant, si vous avez cinq ou plus de boutons dans la barre de navigation, ils se plient en plusieurs lignes (voir l'exemple "Plus d'exemples" en bas de la page).

Bouton actif

Lorsque le lien de la barre de navigation est cliqué, il obtient une apparence sélectionnée (appuyé).

Pour réaliser cette apparence sans cliquer sur le lien, utilisez la classe "ui-btn-active" :

Exemple

<li><a href="#anylink" class="ui-btn-active">Page d'accueil</a></li>

Essayez-le vous-même

Pour plusieurs pages, vous pourriez avoir besoin de définir l'apparence "sélectionné" pour chaque bouton pour indiquer que l'utilisateur est en train de naviguer sur cette page. Si vous le faites, ajoutez la classe "ui-state-persist" ainsi que la classe "ui-btn-active" au lien :

Exemple

<li><a href="#anylink" class="ui-btn-active ui-state-persist">Page d'accueil</a></li>

Essayez-le vous-même

Plus d'exemples

Barre de navigation dans le contenu
Comment ajouter une barre de navigation dans data-role="content".
Barre de navigation dans le pied de page
Comment ajouter une barre de navigation dans le pied de page.
Positionner des icônes dans la barre de navigation
Comment placer des icônes dans la barre de navigation interne du pied de page.
Cinq boutons ou plus
Démonstration de dix boutons dans la barre de navigation.