Créer sa première application jQuery Mobile JQuery Mobile : ajout d'une seconde page à l'application

Pour ajouter une autre page, il suffit de copier-coller le code et de changer l'id de la section correspondante, en mettant à jour ce contenu avec les éléments de la nouvelle page (voir Exemple 1.5).

Exemple 1.5. Ajout d'une seconde page à l'application

<section id="page2" data-role="page">
<header data-role="header"><h1>jQuery Mobile</h1></header>
<div class="content" data-role="content">
<p>Seconde page !</p>
</div>
<footer data-role="footer"><h1>Pearson</h1></footer>
</section>


Il est très simple d'introduire la navigation entre les pages : ajoutez simplement un lien vers la zone de contenu dans la première page de l'application (voir Exemple 1.6).

Exemple 1.6. Ajout d'un lien vers la seconde page

<div class="content" data-role="content">
<p>Première page !</p>
<p><a href="#page2">Aller à la seconde page !</a></p>
</div>
figure 1.3 - un lien vers la page suivante.
Figure 1.3 - Un lien vers la page suivante. © Pearson


En réactualisant l'application, vous découvrez un lien à suivre (voir Figure 1.3).

Tapez sur le lien pour déclencher une transition vers la page suivante. jQuery Mobile gère automatiquement cette animation de transition. Jusqu'à la version 1.0, jQuery Mobile affichait automatiquement un bouton permettant de retourner à la page précédente dans l'en-tête de l'application. Vous devez désormais l'autoriser vous-même, en ajoutant l'attribut data-add-backbtn="true" à la section concernée, comme ici sur la seconde page (voir Exemple 1.7).

Exemple 1.7. Ajout du bouton de retour

<section id="page2" data-role="page" data-add-back-btn="true">
<header data-role="header"><h1>jQuery Mobile</h1></header>
<div class="content" data-role="content">
<p>Seconde page !</p>
</div>
<footer data-role="footer"><h1>Pearson</h1></footer>
</section>
figure 1.4 - le bouton de retour apparaît en haut à gauche.
Figure 1.4 - Le bouton de retour apparaît en haut à gauche. © Pearson

En tapant sur ce bouton (voir Figure 1.4), vous retournez à la page précédente et la transition est, là encore, prise en charge automatiquement par jQuery Mobile.

Par défaut, ce bouton affiche le terme anglais "Back" et vous souhaiterez probablement le traduire. On y parvient très facilement, en modifiant deux options du plug-in Page (reportez-vous au Chapitre 3 pour de plus amples détails sur cette notion). Déposez le code de l'Exemple 1.8 au début de votre code HTML.


Exemple 1.8. Modification du bouton Retour

<script>
$.mobile.page.prototype.options.addBackBtn = "True";
$.mobile.page.prototype.options.backBtnText = "Retour";
</script>


figure 1.5 - on a modifié le texte du bouton de retour.
Figure 1.5 - On a modifié le texte du bouton de retour. © Pearson

L'option addBackBtn ajoute automatiquement un bouton Retour dans l'en-tête et vous évite d'utiliser l'attribut data-add-back-btn. L'option backBtnText vous permet de modifier le texte de ce bouton (voir Figure 1.5).

Vous avez à présent développé votre toute première application jQuery Mobile ! Elle n'est pas encore très utile, mais elle illustre parfaitement la simplicité de ce framework. Il vous suffit de baliser votre contenu de manière sémantique puis de désigner les rôles, les fonctionnalités et les interactions à l'aide d'attributs data- personnalisés. jQuery Mobile s'occupe du reste et les prend en charge automatiquement.

Précédent
Suivant