jquery 3 créer des sites web dynamiques et interactifs...

jQuery 3 Créer des sites web dynamiques et interactifs

ISBN

: 97

8-2-

409-

0048

6-5

26,5

0 €

Ce livre sur jQuery 3 s’adresse aux intégrateurs web qui maîtrisent l’HTML et les CSS et qui veulent offrir aux visiteurs du site une expé-rience dynamique et interactive.

Dans une première partie, vous étudierez le framework jQuery : vous découvrirez les différentes solutions pour l’installer dans un site, vous verrez comment travailler avec l’API de jQuery ; vous apprendrez ainsi à utiliser la syntaxe, les sélecteurs, les événe-ments, les effets et à manipuler les propriétés CSS ; vous verrez également comment modifier et personnaliser les plugins jQuery.

La seconde partie est consacrée à l’étude des widgets de jQuery User Interface qui vous permettront d’implémenter rapidement des composants interactifs : les composants en accordéon et à on-glet, les boutons radio et les cases à cocher, les boîtes de dialogue, les menus hiérarchiques et bien d’autres encore.

Dans la dernière partie, vous apprendrez à installer et à utiliser des plugins jQuery tiers dans de nombreux domaines : utilisation des images, insertion de menus de navigation, création de formulaire dynamique...

jQue

ry 3

- Cr

éer d

es s

ites

web

dyn

amiq

ues

et in

tera

ctifs

jQuery 3 Créer des sites web dynamiques et interactifs

Christophe AUBRY

Responsable pédagogique dans un centre de formation et formateur sur les techno-logies Web et les Arts graphiques pendant plus de quinze ans, Christophe Aubry est aujourd’hui dirigeant de la société net-Plume spécialisée dans la rédaction péda-gogique et la création de sites internet. Auteur de nombreux livres aux Editions ENI notamment sur WordPress, Drupal, HTML et CSS, il reste au fait des nouveautés concernant la conception des sites Web, en effectuant une veille technologique régulière et en intervenant dans de nom-breux forums.

Christophe AUBRY

Pour plus d’informations :

Téléchargementwww.editions-eni.fr.fr

sur www.editions-eni.fr : b code source des exemples

Table des matières 1. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .©

Edi

tions

EN

I - A

ll rig

hts r

eser

ved

Chapitre 1 : IntroductionA. Introduction . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 9B. À propos de cet ouvrage . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 9

Chapitre 2 : Installer et utiliser jQueryA. Les objectifs . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 13B. Télécharger les fichiers jQuery . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 13

1. Les différentes versions de jQuery . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 132. Télécharger les fichiers. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 163. Lier la bibliothèque jQuery . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 16

C. Lier jQuery via un CDN . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 17D. Initialiser un script jQuery . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 18

1. La syntaxe . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 182. Le DOM . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 193. La syntaxe courte . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 19

Chapitre 3 : L'API de jQueryA. Les objectifs . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 23B. Le JavaScript. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 23C. La syntaxe de jQuery . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 24

1. Un exemple simple . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 242. L'affichage de la page. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 243. Le code de la page. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 264. Le code HTML . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 275. Le code CSS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 286. Le script jQuery. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 28

D. Les sélecteurs . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 301. Les objectifs . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 302. Rechercher avec l'identifiant . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 313. Rechercher avec une classe . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 324. Rechercher avec un élément descendant . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 335. Rechercher avec les pseudo-classes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 346. Rechercher le énième élément . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 367. 7. Rechercher les éléments suivants et précédents . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 378. Rechercher dans le contenu. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 389. Rechercher l'élément inclus . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3910. Les sélecteurs pour jQuery . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 40

jQuery 3 - Créer des sites web dynamiques et interactifs2 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

E. Manipuler les propriétés CSS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 411. Les objectifs . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 412. Ajouter et supprimer des classes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 413. Vérifier la présence d'une classe . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 434. Basculer deux classes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 445. Afficher les valeurs des propriétés de style. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 466. Modifier les valeurs des propriétés de style . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 477. Attribuer des propriétés et des valeurs . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 49

F. Les événements. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 501. Les objectifs . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 502. Le clic de la souris . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 503. Le double clic de la souris . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 524. Le bouton de la souris . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 525. Le passage au-dessus et en dehors du pointeur. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 526. L'entrée et la sortie du pointeur . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 547. La gestion du focus . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 608. Les autres événements . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 62

G. Les effets . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 621. Les objectifs . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 622. Afficher et masquer un élément . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 623. Les glissements verticaux . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 654. Les effets de fondu . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 685. Les animations . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 706. Les effets jQuery . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 73

H. Les interactions . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 731. Les objectifs . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 732. Le déplacement . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 743. Le glissé-déposé. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 784. Le redimensionnement . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 835. La sélection . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 876. Le tri . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 93

Chapitre 4 : Les widgets de jQuery UIA. Les objectifs . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 99B. Installer les widgets jQuery UI . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 99

1. La bibliothèque jQuery . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 992. La bibliothèque jQuery UI complète . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 993. Les feuilles de style CSS standards de jQuery UI . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .1014. Les liaisons standards des pages web . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .1015. La bibliothèque jQuery UI personnalisée . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .1016. Les feuilles de style CSS personnalisées de jQuery UI . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .104


Edi

tions

EN

I - A

ll rig

hts r

eser

ved

7. Les feuilles de style CSS de la galerie de jQuery UI. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .106C. Exploiter les widgets jQuery UI . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .107

1. L'architecture des widgets . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .1072. Les paramètres des widgets jQuery UI . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .107

D. Les outils de développement . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .109E. L'accordéon . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .112

1. Présentation du widget . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .1122. La structure HTML de l'accordéon . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .1133. Le script jQuery. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .1144. Personnaliser les règles CSS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .1145. Fermer les onglets . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .1156. Afficher des icônes dans les onglets . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .1157. Adapter la largeur et la hauteur de l'accordéon . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .1178. Adapter la hauteur de l'accordéon . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .1199. Déplacer les onglets . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .120

F. Les panneaux . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .1231. Présentation. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .1232. La structure HTML des panneaux à onglets . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .1233. Le script jQuery. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .1244. Personnaliser les règles CSS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .1255. Fermer les panneaux . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .1256. Changer d'événement . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .1267. Déplacer les onglets . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .126

G. Les boutons . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .1281. Présentation. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .1282. La structure HTML des boutons . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .1283. Le script jQuery. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .1294. Ajouter des icônes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .1295. Les icônes dans les boutons en widget . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .1296. Les icônes dans les boutons en CSS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .1317. Personnaliser l'icône . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .133

H. Les boutons radio . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .1341. Présentation. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .1342. La structure HTML des boutons radio. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .1353. Le script jQuery. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .1354. Ne pas afficher les boutons radio . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .1355. Modifier les règles CSS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .136

I. Les cases à cocher. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .1371. Présentation. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .1372. La structure HTML des cases à cocher . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .1373. Le script jQuery. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .138


4. Ne pas afficher les boutons radio . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .138J. Les menus déroulants . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .139

1. Présentation. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .1392. La structure HTML d'un menu déroulant. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .1393. La mise en forme CSS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .1404. Le script jQuery. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .1405. Créer des groupes d'items . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .1406. Fixer la hauteur du menu . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .1417. Indiquer une consigne . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .142

K. L'autocomplétion . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .1431. Présentation. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .1432. La structure et le script de l'autocomplétion . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .144

L. Les boîtes de dialogue . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .1451. Présentation. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .1452. La structure HTML des boîtes de dialogue . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .1453. Le script jQuery. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .1464. Ouvrir et fermer avec des effets . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .1465. Ajouter des boutons . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .1496. Personnaliser les règles CSS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .150

M. Les bulles d'aide . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .1511. Présentation. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .1512. La structure HTML et jQuery des bulles d'aide. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .1523. Les effets d'animation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .1534. Personnaliser les règles CSS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .1555. Positionner les bulles d'aide. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .1556. Poursuite de la souris . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .157

N. Les champs numériques. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .1581. Présentation. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .1582. La structure du champ numérique . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .1583. Désactiver le champ . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .1584. Récupérer la valeur saisie . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .1605. Des options pour le champ numérique . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .161

O. Les barres de progression . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .1621. Présentation. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .1622. La structure de la barre de progression . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .1623. Créer une barre de progression dynamique. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .1624. La couleur de fond de la barre de progression . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .165

P. Le calendrier . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .1651. Présentation. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .1652. La structure du calendrier . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .1663. Localiser le calendrier . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .167


Edi

tions

EN

I - A

ll rig

hts r

eser

ved

4. Afficher des boutons supplémentaires . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .1685. Afficher le calendrier sous d'autres formes. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .1706. Définir l'intervalle de temps . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .1717. Afficher la date dans un autre champ. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .172

Q. Les menus hiérarchiques . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .1741. Présentation. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .1742. La structure HTML des menus . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .1743. Un menu catégorisé . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .1774. Insérer des icônes dans le menu. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .178

R. La barre de sélection . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .1791. Présentation. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .1792. La structure de la barre de sélection . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .1793. Afficher la valeur sélectionnée . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .1804. Orienter la barre verticalement. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .1815. Afficher la valeur dans le curseur . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .182

Chapitre 5 : Les plugins tiersA. Présentation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .187B. Comparer deux images . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .187

1. Présentation. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .1872. Le plugin imgSlider . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .1873. Le plugin DiffWidget. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .192

C. Les effets de zoom sur les images. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .1951. Présentation. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .1952. Le plugin Light Zoom . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .1953. Le plugin jZoom . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .1994. Le plugin EasyZoom . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .204

D. Les diaporamas . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .2071. Présentation. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .2072. Le plugin Nivo Slider. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .2073. Le plugin Crosscover. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .2134. Le plugin Zoom Slider . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .219

E. Les menus et la navigation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .2251. Présentation. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .2252. Le plugin Vertical Layout Navigation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .2253. Le plugin Pushy . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .2314. Le plugin eosMenu . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .2375. Le plugin scrolltop.js. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .2426. Le plugin Auto-Hiding Navigation. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .2477. Le plugin Avgrund. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .253


F. Manipuler des données . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .2581. Présentation. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .2582. Le plugin Bootstrap Data Table. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .2583. Le plugin Pretty Donut. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .2644. Le plugin graph.js . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .269

G. Le texte. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .2721. Présentation. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .2722. Le plugin Trunc.js . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .2723. Le plugin EasyView . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .2754. Le plugin Placeholder Typewriter . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .2805. Le plugin simpleMarquee . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .283

H. Les formulaires. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .2871. Présentation. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .2872. Le plugin Attrvalidate. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .2873. Le plugin Bootstrap Maxlength . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .2934. Le plugin conditionize.js . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .297

Index . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .305

Chapitre 3 : L'API de jQuery©

Edi

tions

EN

I - A

ll rig

hts r

eser

ved

23. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

Chapi tre 3 : L'A PI de jQu ery

jQu ery 3 - Créer des s i t es web dy nam i q ues et i nteract i fsA. Les objectifsDans ce chapitre nous allons aborder l'API de jQuery. Une API, pour Application ProgrammingInterface, est constituée d'un ensemble de fonctions, de classes et de méthodes qui permettentde créer des applications. Dans notre cas ce sont des applications web. jQuery est une biblio-thèque qui propose une API très bien documentée.

Voici l'URL de l'API de jQuery : http://api.jquery.com.

jQuery étant écrit en JavaScript, nous allons voir brièvement quelques éléments de la syntaxe duJavaScript afin d'aborder celle de jQuery plus facilement.

Suite à cette très courte introduction, nous aborderons la syntaxe de jQuery par l'intermédiaired'un exemple concret pour plus de facilité.

Puis, nous allons apprendre à utiliser jQuery avec ses sélecteurs, avec la manipulation des proprié-tés CSS et nous apprendrons à gérer les événements et les effets jQuery. L'objectif n'est pas dedevenir un développeur expert en jQuery, mais d'avoir suffisamment d'informations pour être àmême de modifier et de personnaliser des scripts jQuery que vous pourrez trouver sur le Web.

B. Le JavaScriptLa bibliothèque jQuery est écrite en JavaScript. Nous allons donc très rapidement aborder la syn-taxe du JavaScript avec un exemple ultrasimple.

Le JavaScript est un langage de programmation de scripts qui va vous permettre de dynamiservos pages web, de les rendre plus attractives et plus interactives pour les visiteurs. Un point im-portant qu'il faut signaler est que le JavaScript est exécuté dans le navigateur de l'internaute, iln'est pas exécuté sur les serveurs web des hébergeurs. De plus le JavaScript est reconnu par tousles navigateurs web, quelle que soit la plateforme. Il n'y a rien à ajouter dans votre navigateurpour que le JavaScript fonctionne (sauf, bien sûr, si un internaute a désactivé le JavaScript dansson navigateur).

Voyons un premier exemple de script JavaScript :<!doctype html><html lang="fr"><head><meta charset="utf-8"><title>JavaScript</title><script> alert("Bonjour tout le monde !");</script></head><body></body></html>


Détaillons cette page :- Vous remarquez que cette page n'a pas de contenu dans l'élément <body>. Ce n'est absolu-

ment pas obligatoire.- Le code JavaScript est placé dans l'élément HTML <script>.- Le script est composé d'une simple ligne de code, une instruction. Cette instruction utilise une

seule fonction : alert(). Cette fonction possède un nom qui lui est strictement réservé et unepaire de parenthèses afin de pouvoir y placer des paramètres. Cette fonction a pour but d'affi-cher une boîte de dialogue dans la fenêtre du navigateur, avec un texte.

- Le paramètre de cette fonction est placé entre guillemets car nous souhaitons afficher du texte :"Bonjour tout le monde !".

- Cette instruction se termine par le caractère point-virgule : ;. Cela permet d'indiquer quel'instruction est terminée.

Voici l'affichage obtenu :

Notez bien que l'aspect de la boîte de dialogue peut varier d'un navigateur à l'autre.

Le fichier à télécharger est C03-B1.html.

C. La syntaxe de jQuery

1. Un exemple simplePlutôt que de rédiger un chapitre austère sur la syntaxe de jQuery, nous allons partir d'unexemple simple et concret. jQuery utilise la syntaxe JavaScript, mais il la simplifie et la rend pluscourte et plus rapide à saisir. Notez que dans cette optique de rapidité, jQuery utilise parfois unesyntaxe qui lui est propre, pour gagner sur le nombre de lignes de code.

2. L'affichage de la pagePour bien appréhender cette syntaxe, nous allons donc créer un premier script jQuery très simple.


Edi

tions

EN

I - A

ll rig

hts r

eser

ved

25. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

Au chargement de la page, nous affichons des titres de chapitre :

Au survol d'un chapitre, le curseur prend l'aspect d'un "pointeur-main" :

Au clic de la souris, le chapitre se déploie avec un effet de glissement :

Au clic sur un autre chapitre, le chapitre précédent se ferme et celui cliqué s'ouvre, toujours avecdes effets de glissement :


3. Le code de la pageMaintenant, voyons le code utilisé :

<!doctype html><html lang="fr"><head><meta charset="utf-8"><title>jQuery</title><script src="js/jquery.js"></script><script>$(document).ready(function(){ $("div.point").hide(); $("p.chapitre").click(function(){ $(this).next("div.point").slideDown(300) .siblings("div.point").slideUp("slow"); });});</script><style>.menu { width: 150px;}.chapitre { padding: 5px; cursor: pointer; position: relative; margin: 0 0 3px 0; font-weight: bold; border: 1px solid black;}.point a { display: block; color: black; background-color: white; padding-left: 30px; text-decoration: none;}.point a:hover { color: black; text-decoration: underline;}


Edi

tions

EN

I - A

ll rig

hts r

eser

ved

27. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

</style></head><body><div> <div class="menu"> <p class="chapitre">Chapitre 1</p> <div class="point"> <a href="#">Point 1</a> <a href="#">Point 2</a> <a href="#">Point 3</a> </div> <p class="chapitre">Chapitre 2</p> <div class="point"> <a href="#">Point 1</a> <a href="#">Point 2</a> <a href="#">Point 3</a> </div> <p class="chapitre">Chapitre 3</p> <div class="point"> <a href="#">Point 1</a> <a href="#">Point 2</a> <a href="#">Point 3</a> </div> </div> </div></body></html>

Le fichier à télécharger est C03-C3.html.

4. Le code HTMLDans un premier temps, voyons la structure de la page :- L'ensemble de la page est inséré dans une boîte <div> anonyme.- Le menu est placé dans une boîte <div class="menu">, utilisant la classe .menu.- Le titre de chaque chapitre est inséré dans un élément <p>, avec la classe .chapitre :<p class="chapitre">Chapitre 1</p>.

- Chaque chapitre possède des "points" qui sont insérés dans une boîte <divclass="point">.

- Chaque point est placé dans un lien <a>.


5. Le code CSSLa mise en forme se fait avec des règles CSS.

Le menu, avec la classe .menu possède une largeur d'affichage de 150 pixels :.menu { width: 150px;}

Chaque titre de chapitre, avec la classe .chapitre, est en position relative, avec des remplis-sages et des marges définis. Le curseur est un pointeur, le texte est en gras et le titre possède unebordure.

.chapitre { padding: 5px; cursor: pointer; position: relative; margin: 0 0 3px 0; font-weight: bold; border: 1px solid black;}

Chaque point de chapitre, avec le sélecteur .point a, s'affiche en mode bloc, doté d'arrière-plan blanc, avec un remplissage, sans décoration de texte doté d'une couleur noire.

.point a { display: block; color: black; background-color: white; padding-left: 30px; text-decoration: none;}

Au survol des points, avec le sélecteur .point a:hover, nous avons une décoration de texteen souligné, toujours de couleur noire.

.point a:hover { color: black; text-decoration: underline;}

6. Le script jQueryMaintenant nous allons aborder la syntaxe du script jQuery.

La bibliothèque jQuery est liée localement au fichier qui a été précédemment téléchargé (repor-tez-vous au chapitre précédent pour avoir plus de précision) :<script src="js/jquery.js"></script>

jquery 3 créer des sites web dynamiques et interactifs...

Documents