Skip to content

Chapitre 03

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

Au cours de ce chapitre nous allons aborder les points suivants :

  • Ajouter des boutons de navigation dans l'élément header

Ajouter des boutons de navigation dans l'entête

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 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>

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>

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>

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>

Démos

https://christophegueroult.github.io/jQueryMobile/CHAPITRE-02/p1.html https://christophegueroult.github.io/jQueryMobile/CHAPITRE-02/p2.html https://christophegueroult.github.io/jQueryMobile/CHAPITRE-02/p3.html https://christophegueroult.github.io/jQueryMobile/CHAPITRE-02/p4.html

Clone this wiki locally