jQuery Mobile barre de navigation
La barre de navigation est un ensemble de liens disposés horizontalement composition, généralement contenue dans la tête ou la queue.
Par défaut, les liens dans la barre de navigation deviendront automatiquement le bouton (pas de données-role = "button").
En utilisant des données-role = "navbar" attribut pour définir la barre de navigation:
Exemples
<div data-role="navbar" >
<ul>
<li><a href="#anylink">首页</a></li>
<li><a href="#anylink">页面二</a></li>
<li><a href="#anylink">搜索</a></li>
</ul>
</div>
</div>
Essayez »
 | Par défaut, la largeur du bouton et son contenu de même. Utilisez une liste à puces pour diviser uniformément la largeur des boutons: un bouton à 100% de la largeur de deux boutons représentaient chacun 50% de la largeur de trois boutons représentaient chacun 33,3% de la largeur, et ainsi de suite. Toutefois, si vous spécifiez plus de cinq boutons dans la barre de navigation sera divisé en plusieurs lignes (voir "Autres exemples"). |
|---|
Navigation icônes de boutons
Nous pouvons utiliser l'attribut data-icône pour ajouter des icônes pour les boutons de navigation:
données-icon attribut avec la section de classe CSS de l'icône en utilisant la même valeur. classe CSS à utiliser class = "ui-icône- valeur" , les données-icon attribut à utiliser les données-icon = "valeur".
| Valeur de la propriété | description | icône |
|---|---|---|
| data-icon = "home" | maison | |
| data-icon = "arrow-r" | Sur la flèche droite | |
| data-icon = "search" | recherche |
Pour un manuel de référence complet pour toutes les icônes jQuery Mobile, visitez notre jQuery Mobile icon Manuel de référence .
Lieu icon
Comme "ui-btn-icône- position" même catégorie (section d'icône sont décrits en détail), vous pouvez définir l'emplacement de l'icône affichée: supérieure (tête), à droite (à droite), en bas ( en bas) ou à gauche (sur la gauche ).
Localisation icône sur le conteneur de barre de navigation est fourni, en utilisant les données-iconpos attribut pour spécifier l'emplacement:
| Valeur de la propriété | description | Exemples |
|---|---|---|
| data-iconpos = "top" | Alignez l'icône en haut | essayer |
| data-iconpos = "right" | Icône sur le aligné à droite | essayer |
| data-iconpos = "bottom" | Alignez l'icône en bas | essayer |
| data-iconpos = "left" | Alignez l'icône à gauche | essayer |
| Par défaut, l'icône est située au-dessus du texte des boutons de navigation (données-iconpos = "top"). |
|---|
bouton d'activation
Quand un lien sur la barre de navigation est cliqué, il obtiendra sélectionné (pressé) apparence.
Si vous souhaitez obtenir cette apparence ne cliquez pas sur le lien, utilisez class = "ui-btn-active":
Pour plusieurs pages, vous pouvez vérifier l'apparence de chaque bouton au nom de la page actuelle se trouve l'utilisateur. Pour ce faire, ajoutez "state-ui-persistent" et un lien "ui-btn-active" à la classe:
D'autres exemples
Contenu barre de navigation
Comment ajouter la barre de navigation dans le data-role = "content".
Queue barre de navigation
Comment ajouter la barre de navigation à l'arrière.
icône cible dans la barre de navigation
Comment localiser l'icône de la barre de navigation dans la queue.
Plus de cinq boutons
10 Bouton Demo dans la barre de navigation.