jQuery Mobile Barre de navigation
Une barre de navigation se compose d'un groupe de liens disposés horizontalement, généralement contenus dans un en-tête ou un pied de page.
Par défaut, les liens d'une barre de navigation deviennent automatiquement des boutons (pas besoin de data-role="button").
Utilisez l'attribut data-role="navbar" pour définir une barre de navigation :
Exemple
<div data-role="navbar">
<ul>
<li><a href="../index.html">Accueil</a></li>
<li><a href="../index.html">Page 2</a></li>
<li><a href="../index.html">Rechercher</a></li>
</ul>
</div>
</div>
Essayez-le »
 |
Par défaut, la largeur d'un bouton est la même que celle de son contenu. Utilisez une liste non ordonnée pour répartir équitablement la largeur des boutons : 1 bouton a une largeur de 100%, 2 boutons ont chacun une largeur de 50%, 3 boutons ont chacun une largeur de 33.3%, et ainsi de suite. Toutefois, si vous spécifiez plus de 5 boutons dans la barre de navigation, ils seront répartis sur plusieurs lignes (voir « Plus d'exemples »). |
|---|
Icônes des boutons de la barre de navigation
Nous pouvons utiliser l'attribut data-icon pour ajouter des icônes aux boutons de la barre de navigation :
L'attribut data-icon utilise les mêmes valeurs que les classes CSS du chapitre Icônes. L'utilisation de la classe CSS est class="ui-icon-value", l'utilisation de l'attribut data-icon : data-icon="value"。
| Valeurs d'attributs | Description | Icône |
|---|---|---|
| data-icon="home" | Accueil | |
| data-icon="arrow-r" | Flèche droite | |
| data-icon="search" | Rechercher |
Pour une référence complète de toutes les icônes de boutons jQuery Mobile, veuillez consulter notreManuel de référence des icônes jQuery Mobile。
Positionnement des icônes
Tout comme la classe "ui-btn-icon-position" (décrite en détail dans le chapitre Icônes), vous pouvez définir la position de l'icône : en haut, à droite, en bas ou à gauche.
La position de l'icône est définie sur le conteneur de la barre de navigation, en utilisant l'attributdata-iconpospour spécifier la position :
| Valeurs d'attributs | Description | Exemple |
|---|---|---|
| data-iconpos="top" | Icône alignée en haut | Essayez-le |
| data-iconpos="right" | Icône alignée à droite | Essayez-le |
| data-iconpos="bottom" | Icône alignée en bas | Essayez-le |
| data-iconpos="left" | Icône alignée à gauche | Essayez-le |
|
Par défaut, l'icône des boutons de la barre de navigation est positionnée au-dessus du texte (data-iconpos="top"). |
|---|
Bouton actif
Lorsqu'un lien de la barre de navigation est cliqué, il prend une apparence sélectionnée (enfoncée).
Si vous souhaitez cette apparence sans cliquer sur le lien, utilisez class="ui-btn-active" :
Pour plusieurs pages, vous pouvez vouloir que l'apparence sélectionnée de chaque bouton représente la page sur laquelle l'utilisateur se trouve actuellement. Pour ce faire, ajoutez "ui-state-persist" et "ui-btn-active" à la classe du lien :
Exemple
Essayez-le »
Plus d’exemples
Comment ajouter une barre de navigation à l'intérieur de data-role="content".
Comment ajouter une barre de navigation dans un pied de page.
Comment positionner les icônes dans une barre de navigation dans un pied de page.
Démonstration de 10 boutons dans une barre de navigation.