Skip to content

Chapitre 02

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

Travailler avec les pages

Notions abordées lors de ce chapitre

Implémenter jQuery Mobile à partir d'un CDN

Sur la page des téléchargement de jQuery Mobile http://jquerymobile.com/download/, récupérer les balises <link> et <script> ou copier-coller le snippet suivant :

<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" />
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>

et les remplacer par les balises que nous avions inséré précédemment.

Créer et naviguer entre plusieurs pages sur un seul fichier

Il est possible d'ajouter plusieurs page sur un même fichier en ajoutant plusieurs blocs dotés de l'attribut data-role=page. Chaque bloc doit prendre un attribut id avec un identifiant unique. Une balise <a> avec un lien ancré #maPage permet de naviguer entre les pages.

<div data-role="page" id="homePage">
   <!-- afficher la page aboutPage -->
   <a href="#aboutPage">A propos de cette formation</a>
</div>

<div data-role="page" id="aboutPage">
   <!-- afficher la page homePage -->
   <a href="#homePage">Retour à la page d'accueil</a>
</div>

Dès qu'il voit un lien, jQuery Mobile exécute un appel Ajax pour charger la page identifiée par l'id correspondant à la place de la page en cours.

Ajouter des liens externes sans faire d'appel Ajax

Dans certains cas un travail peut être fait sur des liens externes et l'appel Ajax peut poser un problème car la librairie jQuery Mobile est toujours chargée. Il est possible de demander à jQuery Mobile de suivre un lien externe sans faire appel à Ajax pour afficher la page externe à notre application en utilisant l'attribut data-ajax="false" comme dans l'exemple ci-dessous :

<div data-role="page" id="homePage">
   <!-- lien vers page externe -->
   <a href="http://www.webinfoparis.fr" data-ajax="false">webinfoparis.fr</a>
</div>

Créer et naviguer entre plusieurs pages sur plusieurs fichiers

<div role="page" id="homePage">
   <!-- naviguer vers page sur un autre fichier -->
   <a href="programme.html">Programme de la formation</a>
</div>

jQuery Mobile exécute un appel Ajax pour charger le fichier programme.html à la place de la page en cours.

Surcharger le title des pages sur un même fichier

Vous remarquerez que lorsque l'on affiche deux pages sur deux fichiers différents, le title change car chaque fichier dispose de sa propre balise <title>. Notez cependant que lorsque l'on affiche deux pages présentes sur un même fichier, le contenu de la balise <title> change aussi. Cela est du au fait que jQuery Mobile utilise le contenu de l'élément data-role=header pour modifier le contenu de la balise <title>. Il est possible de surcharger le title en utilisant l'attribut data-title sur le bloc de page comme ceci :

<div data-role="page" id="aboutPage" data-title="Tout savoir sur la formation jQuery Mobile">

Pré-charger des contenus

Une web application peut contenir de très nombreuses pages. Aussi, mettre toutes les pages dans un seul et même fichier peut aboutir à une application longue à charger et difficile à maintenir. Il est donc préférable d'utiliser plusieurs fichiers. Cependant, le chargement de fichiers prend du temps. Il est possible de pré-charger des fichiers dès le lancement de l'application en utilisant l'attribut data-prefetch

<p><a href="programme.html" data-prefetch="true">Programme de la formation</a>.</p>

Néanmoins pré-charger toutes les pages au chargement de l'application revient à mettre toutes les pages dans un même fichier au niveau du temps de chargement. Il est donc souhaitable de ne pré-charger que les pages importantes, celles consultées le plus souvent pour apporter une meilleure expérience utilisateur.

Appliquer une transition entre chaque page

Il est possible de configurer jQuery Mobile en global pour les transitions entre chaque page. Nous reviendrons plus tard sur ce sujet. Pour effectuer une transition sur un lien spécifique, il suffit d'utiliser l'attribut data-transition.

Les différentes transitions proposées sont : fade (par defaut), flip, flow, pop, slide, slidedown, slidefade, turn et done.

<a href="p4.html" data-transition="pop">Revenir à la page p4</a>

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