jQuery Mobile Barres d'outils
Les éléments de barre d'outils sont généralement situés dans l'en-tête et le pied de page - ce qui rend la navigation facile d'accès :
Barre d'en-tête
La barre d'en-tête contient généralement le titre/logo de la page ou un ou deux boutons (généralement accueil, options ou recherche).
Vous pouvez ajouter des boutons à gauche ou à droite de l'en-tête.
Le code suivant ajoutera un bouton à gauche du texte du titre de l'en-tête, et un bouton à droite du texte du titre de l'en-tête :
Exemple
<a href="#" class="ui-btn ui-icon-home ui-btn-icon-left">Accueil</a>
<h1>Bienvenue sur ma page d'accueil</h1>
<a href="#" class="ui-btn ui-icon-search ui-btn-icon-left">Rechercher</a>
</div>
Essayez-le »
Le code suivant ajoutera un bouton à gauche du texte du titre de l'en-tête :
Exemple
<a href="#" class="ui-btn ui-btn-leftui-icon-home ui-btn-icon-left">Accueil</a>
<h1>Bienvenue sur ma page d'accueil</h1>
</div>
Essayez-le »
Cependant, si vous placez le lien du bouton après l'élément <h1>, le texte à droite ne s'affichera pas. Pour ajouter un bouton à droite du titre de l'en-tête, spécifiez la classe comme "ui-btn-right" :
Exemple
<h1>Bienvenue sur ma page d'accueil</h1>
<a href="#" class="ui-btn ui-btn-rightui-icon-home ui-btn-icon-left">Rechercher</a>
</div>
Essayez-le »
 |
L'en-tête peut contenir un ou deux boutons, tandis que le pied de page n'a aucune limite. |
|---|
Barre de pied de page
La barre de pied de page est plus flexible que la barre d'en-tête - elle est plus fonctionnelle et polyvalente sur toute la page, elle peut donc contenir autant de boutons que vous le souhaitez :
Exemple
<a href="#" class="ui-btn ui-icon-plus ui-btn-icon-left">Suivez-moi sur Facebook</a>
<a href="#" class="ui-btn ui-icon-plus ui-btn-icon-left">Suivez-moi sur Twitter</a>
<a href="#" class="ui-btn ui-icon-plus ui-btn-icon-left">Suivez-moi sur Instagram</a>
</div>
Essayez-le »
Remarque :Le pied de page est stylisé différemment de l'en-tête (pas de remplissage ni d'espacement, et les boutons ne sont pas centrés). Nous pouvons utiliser un style simple pour corriger cela :
Vous pouvez également disposer les boutons dans le pied de page horizontalement ou verticalement :
Exemple
<div data-role="controlgroup" data-type="horizontal">
<a href="#" class="ui-btn ui-icon-plus ui-btn-icon-left">Suivez-moi sur Facebook</a>
<a href="#" class="ui-btn ui-icon-plus ui-btn-icon-left">Suivez-moi sur Twitter</a>
<a href="#" class="ui-btn ui-icon-plus ui-btn-icon-left">Suivez-moi sur Instagram</a>
</div>
</div>
Essayez-le »
Positionnement des barres d'en-tête et de pied de page
L'en-tête et le pied de page peuvent être positionnés de trois façons :
- Inline - Par défaut. Les barres d'en-tête et de pied de page sont alignées avec le contenu de la page.
- Fixe - Les barres d'en-tête et de pied de page sont fixées en haut et en bas de la page.
- Plein écran - Globalement identique au mode de positionnement Fixe, les barres d'en-tête et de pied de page sont fixées en haut et en bas de la page. Toutefois, lorsque la barre d'outils sort de l'écran au défilement, elle ne réapparaîtra pas automatiquement, sauf si vous touchez l'écran. C'est très utile pour les applications d'image ou de vidéo qui renforcent l'immersion. Notez que dans ce mode, la barre d'outils recouvre le contenu de la page, il est donc préférable de l'utiliser dans des situations particulières.
Utilisez l'attribut data-position pour positionner les barres d'en-tête et de pied de page :
Positionnement Inline (par défaut)
<div data-role="footer" data-position="inline"></div>
Essayez-le »
Positionnement fixe
<div data-role="footer" data-position="fixed"></div>
Essayez-le »
Pour activer le positionnement plein écran, utilisez data-position="fixed" et ajoutez l'attribut data-fullscreen à l'élément :
Positionnement plein écran
<div data-role="footer" data-position="fixed" data-fullscreen="true"></div>
Essayez-le »
Astuce :Le positionnement plein écran convient aux photos, aux images et aux vidéos.
Astuce :En positionnement fixe et plein écran, un appui sur l'écran masque et affiche les barres d'en-tête et de pied de page.
Plus d’exemples
Pour afficher uniquement les icônes dans les barres d'outils, vous pouvez utiliser la classe ui-btn-icon-notext.