Télécharger cours développer avec jQuery Mobile, tutoriel jQuery & document PDF.
Passage d’une page à l’autre
Le passage d’une page à une autre peut se faire de différentes manières. Dans le cas d’un document multi-page, le passage, comme on l’a vu précédemment, se fait en cliquant sur un ancre possédant l’ID de la page que l’on souhaite atteindre. Ainsi, en cliquant sur le lien ci-dessous, on passera de la page courante vers la page 1 :
<p><a href= »#page1″>Aller à la page 1</a></p>
Si l’on souhaite par contre atteindre un contenu qui n’est pas dans le document courant, jQuery Mobile utilise par défaut la technologie Ajax, pour passer d’une vue à une autre. Le contenu est importé et rajouté au DOM.
<a href= »externe.html » rel= »external »>Une page externe</a>
L’attribut rel= »external » permet de préciser qu’il s’agit bien d’une page externe au document courant. Si l’on ne souhaite pas utiliser Ajax pour passer d’un contenu à un autre, il faut mettre l’attribut data-ajax à false. Soit avec l’exemple précédent :
<a href= »externe.html » rel= »external » data-ajax= »false »>Une page
externe</a>
Utiliser les transitions entre les vues
jQuery Mobile propose plusieurs effets de transitions inspirés des transitions disponible au sein d’applications natives.
Il existe actuellement (jQuery Mobile 1.1) 8 transitions : fade, pop, flip, turn, flow, slide, slideup et slidedown.
L’effet de transition doit être définit dans le lien qui servira au passage de la vue courante vers une autre :
<a href= »index.html » data-transition= »pop »>Effet pop</a>
On chargera donc le contenu du fichier index.html avec l’effet pop.
Les boites de dialogues
Les transitions citées précédemment sont également utilisées dans la définition d’une boite de dialogue. L’effet « pop » est utilisé par défaut.
<a href= »index.html » data-rel= »dialog »>Effet pop</a>
On peut aussi définir son effet :
<a href= »index.html » data-rel= »dialog » data-transition= »flip »>Flip</a>
Voir démo 3 (chapitre 3).
Quelques astuces pour les pages made in Apple
Apple a définie un certain nombre de métadonnées qui permettent d’enrichir le développement d’applications web mobile. Ces spécificités n’agissent bien sûr que sur des devices sous iOS (iPod, iPhone et iPad).
Définir l’icône d’une application
<link rel= »apple-touch-icon » href= »apple-touch-icon.png »>
<link rel= »apple-touch-icon » sizes= »72×72″ href= »apple-touch-icon-
72×72.png »>
<link rel= »apple-touch-icon » sizes= »114×114″ href= »apple-touch-icon-114×114.png »>
……
1 .Introduction au Framework
1.1 . jQuery au cœur de l’internet Mobile
1.2 . Découvrir Le Framework
1.2.1 Installation de jQuery Mobile
1.2.2 Une première application
2 .Rappels sur jQuery
2.1 .Sélection d’éléments
2.2 .Manipulation du DOM (Document Object Model)
2.2.1 La fonction text()
2.2.2 La fonction html()
2.2.3 La fonction remove
2.3 .Gestion des événements
2.3.1 L’événement bind
2.3.2 L’événement click
2.3.3 L’événement toggle
2.3.4 L’événement submit
2.4 .Ajouter des effets
2.4.1 hide() et show()
2.5 .Autres fonctions intéressantes
2.5.1 $.browser
2.5.2 each
2.5.3 after
2.6 .Développer avec Ajax
2.7 .Travaux pratiques
3 . Utilisation des composants jQuery Mobile
3.1 .Créer une page avec jQuery Mobile
3.1.1 Structure d’une page
3.1.2 Contenu d’une page
3.1.3 Structure multi-page
3.1.4 Passage d’une page à l’autre
3.1.5 Utiliser les transitions entre les vues
3.1.6 Les boites de dialogues
3.1.7 Quelques astuces pour les pages made in Apple
3.2 . Créer des listes
3.2.1 Définir une liste simple
…….
Si le lien ne fonctionne pas correctement, veuillez nous contacter (mentionner le lien dans votre message)Développer avec jQuery Mobile (984 KO) (Cours PDF)
