Bars jQuery Navigation mobile
Une barre de navigation est constitué d'un groupe de liens qui sont alignés horizontalement, généralement dans un en-tête ou pied de page:
La barre est codé comme une liste non ordonnée de liens enveloppé dans un <div> élément qui a la data-role="navbar" attribut:
Exemple
<div data-role="header">
<div data-role="navbar" >
<ul>
<li><a href="#anylink">Home</a></li>
<li><a href="#anylink">Page Two</a></li>
<li><a href="#anylink">Search</a></li>
</ul>
</div>
</div>
Essayez - le vous - même » Par défaut, les liens à l' intérieur d' une barre de navigation sera automatiquement transformer en un bouton (pas besoin de class="ui-btn" ou data-role="button" ).
Les boutons sont, par défaut, aussi large que son contenu. Utilisez une liste à puces pour diviser les boutons aussi: 1 bouton prend 100% de la largeur, 2 boutons partagent 50% chacun, 3 boutons 33,3%, etc. Cependant, si vous spécifiez plus de 5 boutons dans la barre de navigation, il se terminera à plusieurs lignes (voir «Autres exemples» ci-dessous).
Les icônes de boutons de navigation
Pour ajouter une icône à votre bouton de navigation, utilisez l'attribut data-icon:
L'icône de données-attribut utiliser les mêmes valeurs que les classes CSS spécifiées dans le chapitre "Icônes". La seule différence est que, au lieu de spécifier class="ui-icon- value " , vous spécifiez l'attribut de data-icon=" value " .
| Attribut Valeur | La description | Icône |
|---|---|---|
| data-icon="home" | Accueil | |
| data-icon="arrow-r" | Flèche droite | |
| data-icon="search" | Chercher |
Pour une référence complète de toutes les icônes de boutons jQuery Mobile, s'il vous plaît visitez notre jQuery Icônes mobiles de référence .
positionnement des icônes
Tout comme avec la "ui-btn-icon- position " de top, right, bottom left "ui-btn-icon- position " classe (spécifié dans le chapitre «Icônes»), vous pouvez choisir où l'icône doit être placé dans le bouton de navigation: top, right, bottom à top, right, bottom en top, right, bottom ou à left .
La position de l'icône est définie sur le conteneur navbar - il est possible de positionner chaque maillon de bouton. Utilisez les data-iconpos attribut pour spécifier la position:
| Attribut Valeur | La description | Exemple |
|---|---|---|
| data-iconpos="top" | alignement icon Top | Essayez - le |
| data-iconpos="right" | alignement icône Droite | Essayez - le |
| data-iconpos="bottom" | alignement icône Bottom | Essayez - le |
| data-iconpos="left" | alignement icône gauche | Essayez - le |
Par défaut, les icônes de boutons de navigation sont placés au- dessus du texte (data-iconpos="top") .
Boutons actifs
Quand un lien dans la barre de navigation est taraudé / cliqué, il obtient le sélectionné (enfoncé) voyez.
Pour obtenir cet aspect sans avoir à appuyer sur le lien, utilisez la class="ui-btn-active" :
Pour plusieurs pages, vous voudrez peut-être le look "sélectionné" pour chaque bouton qui représente la page l'utilisateur est activée. Pour ce faire, ajoutez le "ui-state-persist" classe à vos liens, ainsi que la "ui-btn-active" classe:
Exemple
<li><a href="#anylink"
class="ui-btn-active ui-state-persist" >Home</a></li>
Essayez - le vous - même » Autres exemples
Navbars dans le contenu
Comment ajouter une barre de navigation à l' intérieur data-role="content" .
Navbars dans footer
Comment ajouter une barre de navigation à l'intérieur du pied de page.
Plus de 5 boutons
Une démonstration de 10 boutons dans une barre de navigation