Skip to content

Chapitre 03

Jump to bottom
ChristopheGueroult edited this page Sep 7, 2017 · 11 revisions

Header, Footer et barres de navigation

Notions abordées lors de ce chapitre

Ajouter des boutons de navigation dans le header

L'ajout de boutons

Par défaut 2 boutons peuvent être ajouté dans le header. Chacun d'eux se positionnera à droite puis à gauche du header. Par défaut une balise <a> dans le header prendra la forme d'un bouton mais il est préférable d'ajouter l'attribut data-role=button.

<div data-role="header">
    <a href="index.html" data-role="button">Accueil</a>
    <h1>Header</h1>
    <a href="contact.html" data-role="button">Contact</a>
</div>

Voir la démo

Positionner un bouton

Si l'on insert un seul lien, le bouton se placera automatiquement à gauche, même si celui ci est inséré après le texte du header. Les class ui-btn-right et ui-btn-left permettent de positionner respectivement un bouton à droite ou à gauche.

<div data-role="header">
    <h1>Header</h1>
    <a href="contact.html" data-role="button" class="ui-btn-right">Contact</a>
</div>

Voir la démo

Un bouton avec un icon

Les icons seront abordés lorsque nous verrons les formulaire jQuery Mobile mais l'exemple suivant illustre l'ajout d'icons dans un bouton.

<div data-role="header">
    <a href="index.html" data-role="button" data-icon="home">Home</a>
    <h1>Mon Header</h1>
    <a href="contact.html" data-role="button" data-icon="mail">Contact</a>
</div>

Voir la démo

Ajouter des boutons et liens de retour

boutons et liens de retour

Dans le header l'attribut data-add-back-btn="true" ou dans le main l'attribut data-rel="back" permettent respectivement de créer un bouton de retour et un lien de retour.

<div data-role="header" data-add-back-btn="true">
    <h1>Accueil</h1>
</div>

<div role="main" class="ui-content">
    <p><a href="" data-rel="back">Page précédente</a></p>
</div>

Personnaliser le texte d'un bouton de retour

Un bouton de retour dans l'élément header contient par défaut le text "Back". Il est possible de personnaliser ce texte à l'aide de l'attribut data-back-btn-text="mon text".

<div data-role="header" data-add-back-btn="true" data-back-btn-text="retour">
    <h1>Accueil</h1>
</div>

Voir la démo

Un header de la hauteur d'un bouton de retour

Si l'on ajoute un bouton de retour dans un header qui ne contient aucun texte, le header prendra 0 pixels de haut et le contenu du main glissera sous le bouton de retour. Il est possible de corriger ce problème en ajoutant dans le header une balise <span> avec l'attribut ui-title.

<div data-role="header" data-add-back-btn="true" data-back-btn-text="retour" data-title="Un header vide">
    <span class="ui-title"></span>
</div>

Voir la démo

Travailler avec le footer

Ajouter des boutons dans le footer

Une balise <a> ajoute par défaut un lien avec l'aspect d'un bouton dans le footer. L'attribut data-role=button est également utilisé pour ajouter des boutons dans le footer.

<a href="cgv.html" data-role="button">CGV</a>

Voir la démo

Ajouter de l'espace de part et d'autre du footer

La class ui-bar sur le footer ajoute de l'espace de part et d'autre du footer.

<div data-role="footer" class="ui-bar">
    <a href="mentions.html" data-role="button">Mentions légales</a>
    <a href="cgv.html" data-role="button">CGV</a>
</div>

Voir la démo

Positionner le header et le footer

L'attribut data-position="fixed" permet de positionner le header et le footer respectivement en haut et en bas de page.

<div data-role="header" data-position="fixed">
</div
<div data-role="footer" class="ui-bar" data-position="fixed">
</div>

Voir la démo

Contenus en full screen

Particulièrement utile pour les images en full screen, l'attribut data-fullscreen="true" permet d'obtenir du full screen, applique une transparence sur le header et le footer. Lorsque l'on clique sur l'image, le header et le footer disparaissent pour laisser apparaître l'image en full screen.

<div data-role="page" id="homePage">
    <div data-role="header" data-position="fixed" data-fullscreen="true">
        <h1>Accueil</h1>
    </div>

    <div role="main" class="ui-content">
        <img src="images/ville.jpg" style="width: 100%">
    </div>

    <div data-role="footer" class="ui-bar" data-position="fixed" data-fullscreen="true">
        <a href="cgv.html" data-role="button">CGV</a>
    </div>
</div>

Voir la démo

Créer des barres de navigation

La barre de navigation

Pour créer une barre de navigation dans le header ou dans le footer, il suffit d'utiliser un div avec l'attribut data-role="navbar" et d'y insérer une liste non ordonnée.

<div data-role="navbar">
    <ul>
        <li><a href="#homePage">Accueil</a></li>
	<li><a href="#aboutPage">A propos</a></li>
    </ul>
</div>

Bouton actif sur la page en cours

La class ui-btn-active permet de mettre un bouton à l'état actif dans une barre de navigation.

<div data-role="navbar">
    <ul>
        <li><a href="#homePage" class="ui-btn-active">Accueil</a></li>
	<li><a href="#aboutPage">A propos</a></li>
    </ul>
</div>

Voir la démo

Créer un menu de navigation persistant

Un menu tel que nous l'avons fait actuellement disparait quand on passe d'une page à l'autre en fonction de la transition appliquée sur la page. De plus, l'état actif du bouton de la page en cours ne persiste pas toujours. Il est possible de laisser apparaitre le menu quand on navigue de page en page et de faire persister l'état actif des boutons. Pour cela il faut suivre ces quelques étapes dans le html :

  1. Le div data-role="footer" doit être présent sur toutes les pages
  2. Le footer doit avoir le même attribut data-id sur toutes les pages
  3. Le lien actif doit avoir les class ui-btn-active et ui-state-persist
  4. Le footer doit avoir la même thème sur toutes les pages

Voir la démo

Clone this wiki locally