Skip to content

Chapitre 02

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

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

  • Implémenter jQuery Mobile à partir d'un CDN
  • Créer et naviguer entre plusieurs pages sur un seul fichier
  • Ajouter des liens externe sans utiliser Ajax
  • Créer et naviguer entre plusieurs pages sur plusieurs fichiers

Implémenter jQuery et 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 blocks 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 externe sans utiliser 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.

Démos

https://christophegueroult.github.io/jQueryMobile/CHAPITRE-01/p1.html https://christophegueroult.github.io/jQueryMobile/CHAPITRE-01/p2.html

Clone this wiki locally