jQuery Mobile Toolbars
éléments de barre d'outils sont souvent placés à l'intérieur-têtes et pieds - pour "accès facile" navigation:
Bars en-tête
L'en-tête se trouve au sommet de la page et contiennent généralement une page titre / logo ou un ou deux boutons (généralement à domicile, les options ou la recherche).
Vous pouvez ajouter des boutons à gauche et / ou sur le côté droit de l'en-tête.
Le code ci-dessous, va ajouter un bouton «Home» à gauche et un bouton "Recherche" à la droite du texte en-tête du titre:
Exemple
<div data-role="header">
<a href="#"
class="ui-btn ui-icon-home ui-btn-icon-left">Home</a>
<h1>Welcome To My Homepage</h1>
<a href="#" class="ui-btn ui-icon-search ui-btn-icon-left">Search</a>
</div> Essayez - le vous - même » Le code suivant ne fera qu'ajouter un bouton sur le côté gauche du titre d'en-tête:
Exemple
<div data-role="header">
<a href="#"
class="ui-btn ui-btn-left ui-icon-home ui-btn-icon-left">Home</a>
<h1>Welcome To My Homepage</h1>
</div> Essayez - le vous - même » Le code suivant n'ajouter un bouton à la droite du titre d'en-tête:
Exemple
<div data-role="header">
<h1>Welcome To My Homepage</h1>
<a href="#"
class="ui-btn ui-btn-right ui-icon-home ui-btn-icon-left">Search</a>
</div> Essayez - le vous - même » Un en-tête peut contenir un ou deux boutons, tandis que le pied de page n'a pas de limite.
Bars Pied de page
Le pied de page se trouve au bas de la page.
Le pied de page est plus flexible que l'en-tête - il est plus fonctionnel et changeant tout au long des pages, et peut donc contenir autant de boutons que nécessaire:
Exemple
<div data-role="footer">
<a href="#"
class="ui-btn ui-icon-plus ui-btn-icon-left">Add Me On
Facebook</a>
<a href="#" class="ui-btn ui-icon-plus ui-btn-icon-left">Add Me On Twitter</a>
<a href="#" class="ui-btn ui-icon-plus ui-btn-icon-left">Add Me On Instagram</a>
</div> Essayez - le vous - même » Astuce: Les boutons dans le pied de page ne sont pas centrées par défaut. Pour résoudre ce problème, il suffit d'utiliser CSS:
Vous pouvez également les boutons de groupe dans le pied de page horizontalement ou verticalement:
Exemple
<div data-role="footer" style="text-align:center;">
<div data-role="controlgroup"
data-type="horizontal" >
<a href="#"
class="ui-btn ui-icon-plus ui-btn-icon-left">Add Me On
Facebook</a>
<a href="#" class="ui-btn ui-icon-plus ui-btn-icon-left">Add Me On Twitter</a>
<a href="#"
class="ui-btn ui-icon-plus ui-btn-icon-left">Add Me On Instagram</a>
</div>
</div> Essayez - le vous - même » Positionnement têtes et pieds
L'en-tête et le pied de page peuvent être positionnés de trois façons:
- Inline - Default. En-têtes et pieds de page sont en ligne avec le contenu de la page
- Fixed - en- têtes et pieds de page restent positionnés en haut et en bas de la page
- Fullscreen - Behaves comme fixe; les en-têtes et pieds de page restent positionnés en haut et en bas, mais aussi sur le contenu de la page. Il est également un peu voir à travers
Utilisez l'attribut data-position pour positionner vos en-têtes et pieds de page:
Inline Position (par défaut)
<div data-role="header" data-position="inline" ></div>
<div data-role="footer"
data-position="inline" ></div> Essayez - le vous - même » Emploi stable
<div data-role="header" data-position="fixed" ></div>
<div data-role="footer"
data-position="fixed" ></div> Essayez - le vous - même » Pour activer la position fullscreen, l'utilisation des données-position = "fixe" et ajoutez l'attribut data-fullscreen à l'élément:
Position fullscreen
<div data-role="header"
data-position="fixed" data-fullscreen="true" ></div>
<div data-role="footer"
data-position="fixed" data-fullscreen="true" ></div> Essayez - le vous - même » Astuce: La position fullscreen est idéal pour des photos, des images et des vidéos.
Astuce: En tapant l'écran masquer et afficher les en- têtes et pieds de page pour les deux positions fixes et fullscreen.
Autres exemples
Afficher uniquement l'icône dans les barres d' outils
Utilisation de l' ui-btn-icon-notext classe pour afficher seulement l'icône en - tête et pied boutons.