jquery 3 Créer des sites web dynamiques et interactifs

Transcription

1 Chapitre 1 : Introduction A. Introduction 9 B. À propos de cet ouvrage 9 Chapitre 2 : Installer et utiliser jquery A. Les objectifs 13 B. Télécharger les fichiers jquery Les différentes versions de jquery Télécharger les fichiers Lier la bibliothèque jquery 16 C. Lier jquery via un CDN 17 D. Initialiser un script jquery La syntaxe Le DOM La syntaxe courte 19 Chapitre 3 : L'API de jquery A. Les objectifs 23 B. Le JavaScript 23 C. La syntaxe de jquery Un exemple simple 24 1/8

2 2. L'affichage de la page Le code de la page Le code HTML Le code CSS Le script jquery 28 D. Les sélecteurs Les objectifs Rechercher avec l'identifiant Rechercher avec une classe Rechercher avec un élément descendant Rechercher avec les pseudo-classes Rechercher le énième élément Rechercher les éléments suivants et précédents Rechercher dans le contenu Rechercher l'élément inclus Les sélecteurs pour jquery 40 E. Manipuler les propriétés CSS Les objectifs Ajouter et supprimer des classes Vérifier la présence d'une classe Basculer deux classes Afficher les valeurs des propriétés de style Modifier les valeurs des propriétés de style Attribuer des propriétés et des valeurs 49 F. Les événements Les objectifs Le clic de la souris Le double clic de la souris Le bouton de la souris Le passage au-dessus et en dehors du pointeur L'entrée et la sortie du pointeur La gestion du focus 60 2/8

3 8. Les autres événements 62 G. Les effets Les objectifs Afficher et masquer un élément Les glissements verticaux Les effets de fondu Les animations Les effets jquery 73 H. Les interactions Les objectifs Le déplacement Le glissé-déposé Le redimensionnement La sélection Le tri 93 Chapitre 4 : Les widgets de jquery UI A. Les objectifs 99 B. Installer les widgets jquery UI La bibliothèque jquery La bibliothèque jquery UI complète Les feuilles de style CSS standards de jquery UI Les liaisons standards des pages web La bibliothèque jquery UI personnalisée Les feuilles de style CSS personnalisées de jquery UI Les feuilles de style CSS de la galerie de jquery UI 106 C. Exploiter les widgets jquery UI L'architecture des widgets 107 3/8

4 2. Les paramètres des widgets jquery UI 107 D. Les outils de développement 109 E. L'accordéon Présentation du widget La structure HTML de l'accordéon Le script jquery Personnaliser les règles CSS Fermer les onglets Afficher des icônes dans les onglets Adapter la largeur et la hauteur de l'accordéon Adapter la hauteur de l'accordéon Déplacer les onglets 120 F. Les panneaux Présentation La structure HTML des panneaux à onglets Le script jquery Personnaliser les règles CSS Fermer les panneaux Changer d'événement Déplacer les onglets 126 G. Les boutons Présentation La structure HTML des boutons Le script jquery Ajouter des icônes Les icônes dans les boutons en widget Les icônes dans les boutons en CSS Personnaliser l'icône 133 H. Les boutons radio Présentation 134 4/8

5 2. La structure HTML des boutons radio Le script jquery Ne pas afficher les boutons radio Modifier les règles CSS 136 I. Les cases à cocher Présentation La structure HTML des cases à cocher Le script jquery Ne pas afficher les boutons radio 138 J. Les menus déroulants Présentation La structure HTML d'un menu déroulant La mise en forme CSS Le script jquery Créer des groupes d'items Fixer la hauteur du menu Indiquer une consigne 142 K. L'autocomplétion Présentation La structure et le script de l'autocomplétion 144 L. Les boîtes de dialogue Présentation La structure HTML des boîtes de dialogue Le script jquery Ouvrir et fermer avec des effets Ajouter des boutons Personnaliser les règles CSS 150 M. Les bulles d'aide Présentation La structure HTML et jquery des bulles d'aide 152 5/8

6 3. Les effets d'animation Personnaliser les règles CSS Positionner les bulles d'aide Poursuite de la souris 157 N. Les champs numériques Présentation La structure du champ numérique Désactiver le champ Récupérer la valeur saisie Des options pour le champ numérique 161 O. Les barres de progression Présentation La structure de la barre de progression Créer une barre de progression dynamique La couleur de fond de la barre de progression 165 P. Le calendrier Présentation La structure du calendrier Localiser le calendrier Afficher des boutons supplémentaires Afficher le calendrier sous d'autres formes Définir l'intervalle de temps Afficher la date dans un autre champ 172 Q. Les menus hiérarchiques Présentation La structure HTML des menus Un menu catégorisé Insérer des icônes dans le menu 178 R. La barre de sélection Présentation 179 6/8

7 2. La structure de la barre de sélection Afficher la valeur sélectionnée Orienter la barre verticalement Afficher la valeur dans le curseur 182 Chapitre 5 : Les plugins tiers A. Présentation 187 B. Comparer deux images Présentation Le plugin imgslider Le plugin DiffWidget 192 C. Les effets de zoom sur les images Présentation Le plugin Light Zoom Le plugin jzoom Le plugin EasyZoom 204 D. Les diaporamas Présentation Le plugin Nivo Slider Le plugin Crosscover Le plugin Zoom Slider 219 E. Les menus et la navigation Présentation Le plugin Vertical Layout Navigation Le plugin Pushy Le plugin eosmenu Le plugin scrolltop.js Le plugin Auto-Hiding Navigation 247 7/8

8 7. Le plugin Avgrund 253 F. Manipuler des données Présentation Le plugin Bootstrap Data Table Le plugin Pretty Donut Le plugin graph.js 269 G. Le texte Présentation Le plugin Trunc.js Le plugin EasyView Le plugin Placeholder Typewriter Le plugin simplemarquee 283 H. Les formulaires Présentation Le plugin Attrvalidate Le plugin Bootstrap Maxlength Le plugin conditionize.js 297 Index 305 8/8