Éric Sarrion JQuery 1. 7 & JQuery UI 2 e édition Groupe Eyrolles, 2011, 2012, ISBN : 978-2-212-13504-6
Avant-propos Dernier né des frameworks JavaScript, jquery a immédiatement séduit les développeurs web. Simple, efficace, complet, il permet de manipuler les pages HTML au moyen de JavaScript de façon révolutionnaire. Finie la syntaxe compliquée : la fonction jquery (), abrégée en $ (), remplace toutes les méthodes JavaScript que vous connaissez. Faire plus simple aurait été difficile... De plus, jquery évolue! Les versions se suivent de façon régulière, tout en gardant une compatibilité ascendante. Aujourd hui, avec la version 1.7, vous accédez à des concepts nouveaux, comme la gestion d objets Deferred permettant d effectuer des synchronisations de tâches, ou la gestion d objets Callbacks pour agir de façon différée sur un événement. Surfant sur la vague, jquery UI a ajouté des fonctionnalités à jquery, au moyen de plug-ins. La même facilité d utilisation que pour jquery est en œuvre, permettant très simplement d ajouter des fonctionnalités graphiques intéressantes comme le glisser-déposer (drag & drop) ou le multifenêtrage, ou encore l autocomplétion. Avec jquery et jquery UI, vous ajoutez à vos sites web une interaction très complète avec les besoins des utilisateurs. Très (trop) peu de livres étant malheureusement disponibles aujourd hui, en français comme en anglais, sur jquery et jquery UI, la nouvelle édition de ce livre, mis à jour pour jquery 1.7, essaye de combler cette lacune, en regroupant dans un même opus (un peu épais mais très digeste) ces deux sujets, très liés l un à l autre. Complet et didactique les fonctions sont présentées les unes après les autres accompagnées d exemples d utilisation, il permettra aux étudiants intéressés par ce sujet d avenir de comprendre et maîtriser le fonctionnement de jquery et jquery UI. Pour les mêmes raisons, il conviendra parfaitement aux développeurs qui souhaitent améliorer l interface utilisateur de leur site, mais aussi aux chefs de projets qui souhaitent connaître les possibilités offertes par ces deux bibliothèques.
VI jquery 1.7 & jquery UI À l attention des puristes du code... L auteur de ce livre n est pas un puriste du code! Il n a qu une ambition : expliquer de la manière la plus simple possible le fonctionnement de jquery et vous montrer comment l utiliser dans vos propres applications. Pour cela, les exemples sont écrits le plus simplement possible, en simplifiant certaines syntaxes, en particulier dans le code HTML. Par exemple, un puriste écrira ceci pour inclure un fichier JavaScript dans le code HTML : <script type="text/javascript" src="jquery.js"></script> L auteur, se concentrant sur la partie réellement utile du code, écrira plutôt : <script src=jquery.js></script> Vous remarquerez que l attribut type a disparu, et que les valeurs des attributs ne sont pas entourées des guillemets. Bien sûr, les deux syntaxes fonctionnent parfaitement dans tous les navigateurs. La seconde présente l avantage de montrer d un seul coup d œil que le fichier jquery.js est inclus dans le code HTML, sans avoir à lire une longue ligne. Un autre exemple est celui du formatage standard d une page HTML. On sait que les standards du W3C (le World Wide Web Consortium, la haute autorité qui essaye d édicter des règles pour le Web) préconisent d écrire une page HTML de la façon suivante : Format d une page HTML selon les standards du W3C <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/tr/html4/strict.dtd"> <html lang="fr"> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8"> <title>titre de la page</title> </head> <body> <div>contenu de la page</div> </body> </html> On retrouve ici la directive DOCTYPE, suivie de la balise <html>, puis les balises <head> et <body>, chacune d elles pouvant inclure d autres balises.
Avant-propos VII Une fois qu on sait comment une page HTML est formatée en standard, on s aperçoit, en réfléchissant un peu, que le lecteur sera finalement surtout intéressé, pour son apprentissage de jquery, par les réponses aux questions suivantes : quels fichiers CSS et JavaScript sont inclus dans la page ; quel est le code HTML inclus dans la balise <body> ; quelles sont les lignes de code JavaScript utilisées dans cette page. C est pour cela que les programmes qui suivent sont dépouillés de certaines balises, telles les balises <html>, <head> et <body>. Si elles ne sont pas présentes dans notre code, le navigateur web les insère lui-même dans l arborescence HTML qu il construit à partir du code HTML de la page. Cette pratique a un avantage : lorsqu une balise sera obligatoire, cela sera signalé. Le lecteur saura donc que, dans ce cas précis, la balise <body>, par exemple, est obligatoire (ce cas sera fréquent lors de l étude de jquery UI). En fait, au lieu de systématiquement insérer toutes les balises dans la page, nous insérons uniquement celles qui sont strictement nécessaires dans ce cas précis. Cela permet de bien voir le rôle de chacune d entre elles et de comprendre leur utilité. L essentiel est que les programmes de ce livre fonctionnent parfaitement sur tous les navigateurs, ce qui est le cas (sauf erreurs typographiques indépendantes de notre volonté). Structure du livre Ce livre est structuré en deux parties : la première est consacrée à l étude de la bibliothèque jquery, tandis que la seconde explore le plug-in jquery UI (en fait, un ensemble de plug-ins regroupés sous le terme générique de jquery UI). Dans la première partie, on trouvera : une introduction à jquery, permettant de comprendre la suite de l ouvrage (chapitre 1) ; les méthodes utilitaires définies par jquery (chapitre 2) ; l étude des sélecteurs, fondamentaux pour écrire du code jquery (chapitre 3) ; l étude des méthodes fournies par jquery, permettant d accéder au DOM et de le manipuler (chapitres 4 et 5), mais aussi de gérer les événements (chapitre 6), d effectuer des requêtes Ajax (chapitre 7) et de produire des effets visuels (chapitre 8) ; la façon de créer un plug-in pour ajouter des fonctionnalités à jquery (chapitre 9) ;
VIII jquery 1.7 & jquery UI la création d objets Deffered (chapitre 10) et Callbacks (chapitre 11) ; un exemple d application complet utilisant jquery, Ajax et PHP (chapitre 12). Dans la seconde partie, dédiée à jquery UI, on trouvera : une introduction à jquery UI, et son paramétrage en fonction des besoins (chapitre 13) ; l étude des fonctionnalités offertes par jquery UI, permettant de faciliter les interactions des utilisateurs dans la page HTML : onglets, menus en accordéon, boîtes de dialogue, boutons, boîtes de progression, sliders, calendriers, autocomplétion, glisser-déposer (drag & drop), sélection multiple, permutation d éléments, redimensionnement et effets visuels divers (chapitres 14 à 26). Remerciements Tous mes remerciements à Karine Joly et à l équipe Eyrolles, pour leur relecture attentive de ce livre, auquel ils ont eux aussi contribué. Retrouvez l auteur sur son site Internet : http://ericsarrion.fr
Table des matières PREMIÈRE PARTIE Les bases de jquery...1 CHAPITRE 1 Philosophie et principes de base... 3 Installation de jquery...............................................3 L objet jquery.....................................................4 $ comme raccourci.................................................4 Chaînage des méthodes.............................................5 Propriétés et méthodes de l objet jquery................................5 Propriétés et méthodes de l objet retourné par jquery ()....................7 Quelques vérifications..............................................8 Philosophie générale de jquery.......................................9 Distinguer l objet jquery et la fonction jquery ()........................9 La fonction jquery () et ses méthodes................................9 Et maintenant?..................................................10 CHAPITRE 2 Méthodes utilitaires... 11 Manipulation d objets..............................................11 Objets en JavaScript............................................11 Méthodes disponibles dans jquery.................................13 $.each () : parcours des propriétés d un objet........................... 13 $.extend () : ajouter des propriétés à un objet.......................... 14 Méthodes booléennes............................................. 16 Manipulation de tableaux...........................................16 Tableaux en JavaScript..........................................16 Méthodes disponibles dans jquery.................................17 $.each () : parcours des éléments d un tableau.......................... 18 $.grep () : trier un tableau........................................ 19 $.map () : créer un nouveau tableau................................. 19
X jquery 1.7 & jquery UI $.merge () : concaténer deux tableaux................................ 20 Manipulation de chaînes de caractères.................................21 Chaînes de caractères en JavaScript.................................21 Méthodes disponibles dans jquery.................................22 $.each () : parcours des caractères dans une chaîne....................... 22 $.trim () : éliminer les espaces en début et en fin de chaîne................ 23 $.param () : sérialiser les valeurs contenues dans un objet................. 23 Autres propriétés et méthodes.......................................25 $.browser : récupérer le navigateur utilisé............................. 25 $.noconflict () : éviter les conflits entre jquery et d autres bibliothèques JavaScript.......... 26 $.fn.jquery : récupérer la version de jquery utilisée...................... 27 CHAPITRE 3 Sélecteurs... 29 De l importance des sélecteurs.......................................29 Les différents types de sélecteurs.....................................31 Sélecteurs simples..............................................31 Sélecteurs d attributs............................................31 Sélecteurs de classe.............................................32 Sélecteurs d identifiant..........................................33 Les pseudo-classes................................................34 Pseudo-classes générales.........................................34 :first-child..................................................... 34 :last-child..................................................... 34 :nth-child(an+b)................................................ 35 :only-child..................................................... 36 :not.......................................................... 36 :empty........................................................ 36 :eq(n)........................................................ 37 :gt(n)........................................................ 37 :lt(n)......................................................... 37 :first......................................................... 38 :last.......................................................... 38 :even......................................................... 38 :odd.......................................................... 39 :parent....................................................... 39 :contains(text).................................................. 39 :has(selector)................................................... 39 :hidden....................................................... 40 :visible....................................................... 40
Table des matières XI :header....................................................... 40 :animated..................................................... 40 Pseudo-classes liées aux formulaires................................41 Les combinateurs.................................................42 Combinateur de descendance.....................................42 Combinateur filial.............................................43 Combinateur d adjacence directe...................................43 Combinateur d adjacence indirecte.................................43 Les sélecteurs multiples............................................43 Exemples utilisant les sélecteurs......................................44 CHAPITRE 4 Accéder au DOM... 47 Document Object Model : rappels JavaScript...........................47 Éléments et attributs...........................................47 DOM (Document Object Model).................................48 Création dynamique d éléments HTML et texte.......................49 Méthodes d insertion dans la page..................................50 Accès direct aux éléments de la page................................51 Propriétés principales...........................................52 Exemple : création dynamique dans la page...........................53 Les différentes formes de la fonction jquery ()..........................55 $(selector, context).............................................55 $(element)...................................................57 $(elements)..................................................58 $(jqueryobject)...............................................60 $(html).....................................................61 Les méthodes d accès au DOM......................................61 Supprimer des éléments dans la liste................................62 Exemples d utilisation des méthodes................................. 63 filter (selector)..........................................63 filter (callback)..........................................63 not (elements)..........................................64 has (selector)...........................................65 slice (startindex, endindex).................................66 Ajouter des éléments dans la liste..................................67 Exemple d utilisation : add (selector, context).......................... 67 Remplacer les éléments de la liste..................................68 Exemples d utilisation des méthodes................................. 70 find (selector)...........................................70 parents (selector)........................................71
XII jquery 1.7 & jquery UI parentsuntil (selector)....................................72 parent (selector).........................................73 closest (selector, context)....................................74 offsetparent ()..........................................75 siblings (selector)........................................77 prev (selector)..........................................78 prevuntil (selector)......................................79 Autres méthodes..............................................80 Exemples d utilisation des méthodes................................. 81 end ()................................................81 andself ().............................................82 map (callback)..........................................83 CHAPITRE 5 Manipuler le DOM... 85 Parcourir les éléments de la collection.................................85 La méthode each (callback).......................................86 La propriété length.............................................87 Accès à un élément particulier de la collection.........................87 Gérer les attributs et propriétés......................................88 Méthodes gérant les attributs.....................................88 attr (name).................................................... 88 attr (name, value)............................................... 89 attr (obj)...................................................... 89 attr (name, callback)............................................. 89 Méthodes gérant les propriétés....................................90 data (key, value)................................................ 90 data (obj)..................................................... 91 data (key)..................................................... 91 data ()........................................................ 92 Gérer les classes CSS..............................................93 Les méthodes addclass ()........................................93 addclass (name)................................................ 93 addclass (callback).............................................. 95 Les méthodes removeclass ().....................................96 removeclass ()................................................. 96 removeclass (name)............................................. 96 removeclass (callback)........................................... 97 Les méthodes toggleclass ()......................................98 toggleclass (name).............................................. 98 toggleclass (name, addorremove).................................. 99
Table des matières XIII toggleclass (callback)............................................ 99 toggleclass (callback, addorremove)............................... 100 La méthode hasclass (name)....................................101 Gérer les styles..................................................101 La méthode css (name).........................................101 La méthode css (name, value)....................................102 La méthode css (obj)..........................................103 La méthode css (name, callback)..................................104 Gérer les dimensions.............................................105 Définition des termes utilisés....................................105 Hauteur..................................................... 105 Largeur..................................................... 106 Méthodes pour gérer la hauteur..................................107 height ()..................................................... 107 height (value)................................................. 107 innerheight () et outerheight ()................................... 108 Méthodes pour gérer la largeur...................................110 Gérer la position.................................................110 offset (coords)...............................................110 position ()..................................................111 Gérer le contenu.................................................112 Méthodes gérant le contenu sous forme HTML......................112 html ()...................................................... 112 html (html)................................................... 112 html (callback)................................................ 113 Méthodes gérant le contenu sous forme texte........................114 text ()....................................................... 114 text (text).................................................... 115 text (callback)................................................. 116 Gérer l attribut value des éléments de formulaires.....................117 val ()....................................................... 118 val (value)................................................... 119 val (callback)................................................. 119 Gérer l attribut checked des éléments de formulaire....................120 Méthodes d insertion dans le DOM..................................121 Insérer un contenu en début de liste : prepend () et prependto ().........122 prepend (html)................................................ 123 prepend (element).............................................. 123 prepend (jqueryobject)......................................... 123 prepend (callback).............................................. 124 prependto (element)............................................ 125
XIV jquery 1.7 & jquery UI prependto (jqueryobject)....................................... 126 prependto (selector)............................................ 126 Insérer un contenu en fin de liste : append () et appendto ().............127 append (html)................................................. 128 append (element)............................................... 128 append (jqueryobject).......................................... 128 append (callback).............................................. 128 appendto (element)............................................ 129 appendto (jqueryobject)........................................ 129 appendto (selector)............................................. 129 Insérer un contenu avant l élément : before () et insertbefore ()...........130 before (html).................................................. 131 before (element)................................................ 131 before (jqueryobject)........................................... 132 before (callback)................................................ 132 insertbefore (element)........................................... 132 insertbefore (jqueryobject)...................................... 132 insertbefore (selector)........................................... 132 Insérer du contenu après l élément : after () et insertafter ()..............132 after (html)................................................... 133 after (element)................................................. 133 after (jqueryobject)............................................ 134 after (callback)................................................ 134 insertafter (element)............................................ 134 insertafter (jqueryobject)....................................... 135 insertafter (selector)............................................ 135 Insérer autour de l élément : wrap () et wrapall ().....................135 wrap (html).................................................. 135 wrap (element)................................................ 136 wrap (jqueryobject)............................................ 137 wrap (selector)................................................. 138 wrap (callback)................................................ 138 wrapall (html)................................................ 139 wrapall (element).............................................. 140 wrapall (jqueryobject)......................................... 140 wrapall (selector).............................................. 140 wrapall (callback).............................................. 140 Insérer autour du contenu de l élément : wrapinner ()..................140 wrapinner (html).............................................. 141 wrapinner (element)............................................ 142 wrapinner (jqueryobject)....................................... 142
Table des matières XV wrapinner (selector)............................................ 142 wrapinner (callback)........................................... 143 Remplacer l élément par un autre : replacewith ().....................143 replacewith (html)............................................. 143 replacewith (element)........................................... 143 replacewith (jqueryobject)...................................... 144 replacewith (callback)........................................... 145 Autres méthodes de gestion du DOM................................147 CHAPITRE 6 Gestion des événements... 149 La gestion des événements en JavaScript..............................149 Uniformiser la gestion des événements avec la méthode bind (eventname, callback)........................................150 Le paramètre event...............................................152 Propriétés et méthodes : aperçu général.............................152 Propagation de l événement.....................................154 Séquence de propagation......................................... 154 Éléments impliqués dans la propagation............................. 155 Stopper la propagation de l événement.............................. 155 Propriétés du paramètre event....................................156 Méthodes du paramètre event....................................157 Transmettre d autres paramètres à un événement avec bind ()..............157 Événements utilisables dans bind ()..................................159 Événements standards.........................................159 Nouveaux événements.........................................160 Créer et déclencher un nouvel événement............................ 161 Transmettre des paramètres lors du déclenchement..................... 162 Exemples de gestion d événements avec bind ().......................163 Déplacement d un élément dans la page............................. 163 Affichage d un menu............................................ 165 Supprimer un gestionnaire d événement avec unbind ()...................167 Utiliser des catégories dans les noms d événements......................167 S assurer de l accessibilité des éléments HTML avec $(document).ready (callback).......................................168 Autres méthodes de gestion d événements.............................170 Gestion avancée des événements avec jquery 1.7.......................173
XVI jquery 1.7 & jquery UI CHAPITRE 7 Requêtes serveur avec Ajax... 177 Mise en place d un serveur.........................................177 Installer un serveur avec PHP....................................178 Installer un serveur avec Ruby on Rails.............................179 Requêtes Ajax avec $.ajax (options)..................................180 Options disponibles...........................................180 Configuration générale de la requête................................ 181 Fonctions de callback permettant un traitement....................... 181 Paramétrage du serveur......................................... 182 Séquence d appel des fonctions de callback..........................182 Serveur fonctionnant avec PHP................................... 183 Serveur fonctionnant avec Ruby on Rails............................ 185 Traiter la réponse du serveur.....................................186 Récupérer et utiliser responsetext.................................. 186 Serveur en PHP........................................186 Serveur avec Ruby on Rails................................188 Récupérer responsexml......................................... 189 Serveur en PHP........................................189 Serveur avec Ruby on Rails................................191 Utiliser responsexml........................................... 192 Serveur en PHP........................................192 Serveur avec Ruby on Rails................................194 responsetext ou responsexml?................................... 195 Utiliser JSON................................................. 195 Transmettre des paramètres au serveur.............................196 Serveur en PHP............................................... 197 Serveur avec Ruby on Rails...................................... 199 Mises à jour avec load (url, data, success)..............................200 Événements Ajax................................................202 CHAPITRE 8 Produire des effets visuels... 207 Effets visuels standards définis par jquery.............................207 Effets sur la hauteur : slideup (), slidedown () et slidetoggle ()..........208 Faire disparaître des éléments avec slideup ()......................... 208 Faire apparaître des éléments avec slidedown ()...................... 210 Faire apparaître ou disparaître des éléments avec slidetoggle ()........... 211 Effets d opacité : fadein (), fadeout () et fadeto ()....................212 Faire apparaître des éléments avec fadein ().......................... 213
Table des matières XVII Faire disparaître des éléments avec fadeout ()........................ 214 Modifier progressivement l opacité des éléments avec fadeto ()............ 215 Effets combinant hauteur et opacité : show (), hide () et toggle ().........216 Faire apparaître des éléments avec show ()........................... 217 Faire disparaître des éléments avec hide ()........................... 218 Faire apparaître ou disparaître des éléments avec toggle ()............... 219 Enchaînements d effets standards...................................221 Principe de fonctionnement.....................................221 Exemple d utilisation : effet blink.................................222 Créer ses propres effets visuels avec jquery............................222 Créer ses propres effets avec animate ().............................222 Décrire le style final des éléments (paramètre objstyle).................224 Utiliser des valeurs numériques................................... 224 Utiliser des valeurs relatives...................................... 225 Paramétrer la progression dans l effet avec easing......................226 Utiliser easing de manière globale.................................. 226 Utiliser easing de manière locale................................... 227 Enchaînement d effets avec animate ()................................228 Gérer la file d attente des effets visuels................................228 Exécuter des effets simultanés sur les mêmes éléments HTML...........229 Arrêter l exécution d un effet avec stop ()............................230 Différer l exécution d un effet avec delay ()..........................231 CHAPITRE 9 Créer un plug-in jquery... 233 Que peut-on ajouter avec un plug-in?................................234 Ajouter de nouvelles méthodes à l objet jquery.........................234 Créer une seule méthode sur l objet jquery..........................234 Créer plusieurs méthodes sur l objet jquery..........................235 Ajouter de nouvelles méthodes aux objets de classe jquery................237 Créer de nouvelles méthodes sur les objets de classe jquery..............237 Créer la méthode dans jquery.fn.................................. 237 Accéder aux éléments HTML dans la méthode........................ 238 Permettre le chaînage des méthodes................................. 239 Ajouter de nouvelles pseudo-classes..................................240 Créer de nouvelles pseudo-classes.................................241 Pseudo-classe sans paramètre..................................... 241 Pseudo-classe avec paramètre..................................... 243 Diffuser un plug-in...............................................245 Création du fichier du plug-in...................................245 Et si jquery ou $ n est plus accessible?.............................246
XVIII jquery 1.7 & jquery UI CHAPITRE 10 Objets Deferred... 249 Créer un objet Deferred...........................................249 Méthodes définies sur l objet Deferred................................249 Cycle de vie d un objet Deferred.....................................251 Fonctions de callback associées aux états de l objet Deferred...............253 Fonctions de callback associées aux notifications effectuées sur l objet Deferred...............................................254 Exemples d utilisation des fonctions de callback associées à l objet Deferred...256 Ajouter une fonction de callback sur l objet Deferred...................256 Transmettre des paramètres à la fonction de callback...................257 Un objet Deferred dans l état resolved ou rejected ne peut plus recevoir de nouvelles notifications.......................................258 Ajouter des fonctions de callback à l objet Deferred dans l état resolved ou rejected..................................................259 Objets Deferred liés à Ajax.........................................260 Objets Promise..................................................263 Créer un objet Promise à partir d un objet Deferred....................263 Créer un objet Promise à partir d un objet de classe jquery..............263 Ajouter des méthodes de traitement aux objets de classe jquery...........264 Synchroniser plusieurs objets Deferred avec $.when ()....................265 Utiliser les résultats fournis dans les fonctions de callback...............266 Synchronisation de deux appels Ajax...............................268 Utiliser les résultats des appels Ajax synchronisés dans les fonctions de callback....................................269 Exemple d utilisation des objets Deferred dans nos programmes.............................................270 CHAPITRE 11 Objets Callbacks... 273 Créer un objet Callbacks...........................................273 Méthodes définies sur l objet Callbacks...............................274 Options de création de l objet Callbacks...............................276 Utiliser le flag once............................................276 Utiliser le flag memory.........................................278 Utiliser le flag stoponfalse......................................281 Combiner plusieurs flags........................................283 Exemple d utilisation des objets Callbacks dans nos programmes...........284
Table des matières XIX CHAPITRE 12 Exemple d application utilisant jquery, Ajax et PHP... 287 Cinématique de l application.......................................287 Affichage de la liste des clients......................................290 Côté client (navigateur)........................................290 Côté serveur.................................................292 Ajout d une nouvelle ligne vierge à l affichage..........................292 Gestion de la modification du nom, du prénom ou du numéro de téléphone..293 Côté client (navigateur)........................................293 Côté serveur.................................................295 Gestion de la suppression d un client.................................297 Côté client (navigateur)........................................297 Côté serveur.................................................298 Application complète.............................................298 DEUXIÈME PARTIE jquery UI : pour des fonctionnalités graphiques avancées...305 CHAPITRE 13 Introduction à jquery UI... 307 Installation de jquery UI..........................................307 Aperçu de jquery UI.............................................308 Qu est-ce qu un un thème CSS?....................................309 Quels fichiers inclure dans nos pages HTML?.........................311 Fichiers non compressés........................................311 Fichiers JavaScript............................................. 311 Fichiers CSS.................................................. 312 Exemple de page HTML incluant les fichiers non compressés............. 312 Fichiers compressés...........................................313 Fichiers JavaScript............................................. 313 Fichiers CSS.................................................. 314 Exemple de page HTML incluant les fichiers compressés................ 314 Changer de thème CSS...........................................315 Et maintenant?.................................................316 CHAPITRE 14 Onglets... 317 Principe de base.................................................317
XX jquery 1.7 & jquery UI Mise en forme du contenu.........................................319 La méthode tabs ()...............................................321 tabs (options)................................................322 Options gérant les onglets........................................ 322 Options gérant les événements liés aux onglets........................ 322 tabs ("action", params).........................................323 Gestion des événements dans les onglets avec bind ()....................324 Exemples d utilisation des onglets...................................325 Création dynamique d onglets....................................325 Modifier le contenu d un onglet au moyen d Ajax.....................326 Exemple 1 : appel au serveur avec "url" et "load"....................... 326 Exemple 2 : ajouter des informations avec la propriété data de ajaxoptions.. 328 Utiliser les événements sur les onglets..............................329 Exemple 1 : utiliser l événement add................................ 329 Exemple 2 : événement tabsadd avec la méthode bind ()................. 331 CHAPITRE 15 Menus en accordéon... 333 Principe de base.................................................333 Mise en forme du contenu.........................................336 La méthode accordion ()...........................................338 accordion (options)............................................338 Options gérant les menus......................................... 339 Options gérant la hauteur du contenu des menus....................... 339 Options gérant les événements liés aux menus......................... 340 accordion ("action", params).....................................340 Gestion des événements dans les menus avec bind ().....................341 Exemples d utilisation des menus en accordéon.........................341 Ouvrir un menu quelconque.....................................341 Charger le contenu d un menu avec Ajax............................343 Exemple 1 : options.change et options.changestart...................... 343 Exemple 2 : accordionchange et accordionchangestart avec la méthode bind (). 344 CHAPITRE 16 Boîtes de dialogue... 347 Principe de base.................................................347 Mise en forme du contenu.........................................350 La méthode dialog ()..............................................352 dialog (options)..............................................352 Options gérant l aspect, la position et les dimensions de la fenêtre.......... 353
Table des matières XXI Options gérant les effets visuels sur la fenêtre......................... 353 Options gérant le comportement de la fenêtre......................... 354 Options gérant les événements dans la fenêtre......................... 355 dialog ("action", params)........................................356 Gestion des événements dans les boîtes de dialogue avec bind ()............357 Exemples d utilisation des boîtes de dialogue...........................357 Ouvrir et fermer une fenêtre.....................................357 Appliquer un effet à l ouverture ou à la fermeture de la fenêtre............358 Empêcher la fermeture de la fenêtre...............................360 Masquer le bouton de fermeture de la fenêtre........................360 Insérer des boutons dans la fenêtre................................361 Insérer un contenu au moyen d Ajax...............................363 Modifier le comportement d une fenêtre avec des effets.................365 CHAPITRE 17 Boutons... 369 Principe de base.................................................369 Mise en forme du contenu.........................................370 La méthode button ().............................................372 button (options)..............................................372 button ("action", params).......................................373 Gestion des événements sur les boutons avec bind ().....................374 Boutons radio...................................................374 Afficher des boutons radio......................................374 Améliorer l affichage avec buttonset ().............................376 Cases à cocher...................................................377 Afficher des cases à cocher......................................377 Améliorer l affichage avec buttonset ().............................378 Exemples d utilisation des boutons...................................379 Afficher des icônes dans les boutons...............................379 Créer une calculatrice..........................................382 Programme de base............................................. 382 Améliorer le programme......................................... 385 Gérer les clics sur les boutons radio................................389 CHAPITRE 18 Barres de progression... 393 Principe de base.................................................393 Mise en forme du contenu.........................................394 La méthode progressbar ().........................................396 progressbar (options)..........................................396
XXII jquery 1.7 & jquery UI progressbar ("action", params)....................................397 Gestion des événements dans les barres de progression avec bind ().........397 Exemples d utilisation des barres de progression........................397 Incrémenter de façon régulière une barre de progression................397 Effectuer un traitement à différentes étapes du remplissage..............399 CHAPITRE 19 Sliders... 401 Principe de base.................................................401 Mise en forme du contenu.........................................402 La méthode slider ()..............................................404 slider (options)...............................................404 Options gérant l aspect et le comportement des sliders................... 405 Options gérant les valeurs des curseurs............................... 405 Options gérant les événements sur le slider........................... 405 slider ("action", params)........................................406 Gestion des événements sur les sliders avec bind ()......................407 Exemples d utilisation des sliders....................................407 Afficher la valeur d un ou plusieurs curseurs.........................407 Régler l opacité d une image à l aide d un slider.......................410 CHAPITRE 20 Calendriers... 413 Principe de base.................................................413 Mise en forme du contenu.........................................415 La méthode datepicker ()..........................................417 datepicker (options)...........................................417 Options gérant l apparence et les effets visuels liés au calendrier........... 418 Options d internationalisation.................................... 419 Options gérant la sélection d une date dans le calendrier................. 421 Options gérant les événements sur le calendrier........................ 421 datepicker ("action", params)....................................422 Exemples d utilisation des calendriers................................423 Afficher plusieurs mois dans le calendrier...........................424 Afficher un calendrier statique...................................426 Indiquer des dates minimale et maximale...........................427 Interdire la sélection de certaines dates.............................428 Présélectionner une date........................................430 Effectuer une requête Ajax lors de la sélection d une date................432
Table des matières XXIII CHAPITRE 21 Autocomplétion... 435 Principe de base.................................................435 Mise en forme du contenu.........................................437 La méthode autocomplete ()........................................439 autocomplete (options).........................................439 Options gérant les listes de suggestions.............................. 440 Options gérant les événements dans la liste de suggestions............... 440 autocomplete ("action", params)..................................441 Gestion des événements sur les listes de suggestions avec bind ()...........442 Exemples d utilisation du mécanisme d autocomplétion..................442 Spécifier la largeur de la liste de suggestions.........................442 Afficher une liste de suggestions dès l ouverture de la page HTML........444 Afficher une liste de suggestions dès l entrée du curseur dans le champ de saisie.........................................445 Produire un effet lors de l apparition de la liste de suggestions............446 Créer dynamiquement la liste de suggestions.........................447 Créer dynamiquement la liste de suggestions en tenant compte de la saisie effectuée...........................................449 Appel Ajax pour un serveur PHP.................................. 449 Appel Ajax pour un serveur Ruby on Rails........................... 451 Insérer des images dans la liste de suggestions........................453 Pour un serveur PHP........................................... 455 Pour un serveur Ruby on Rails.................................... 457 CHAPITRE 22 Glisser-déposer (drag & drop)... 461 La méthode draggable ()...........................................461 draggable (options)............................................462 Options spécifiant les éléments déplaçables........................... 462 Options gérant les éléments déplaçables.............................. 462 Options gérant l effet à la fin du déplacement......................... 463 Options gérant les contraintes de déplacement......................... 464 Options gérant le défilement de la fenêtre lors du déplacement............ 464 Options gérant les événements sur les éléments déplaçables............... 465 draggable ("action", params).....................................466 Gestion des événements sur les éléments déplacés avec bind ().............466 Exemples d utilisation de la fonctionnalité de drag (glisser)................467 Effectuer un traitement lors du déplacement.........................467 Imposer des limites au déplacement...............................468
XXIV jquery 1.7 & jquery UI Contraindre le déplacement à un espace donné........................ 468 Contraindre le déplacement à l horizontale ou à la verticale.............. 469 Déplacer un objet en le dupliquant................................470 La méthode droppable ()...........................................475 droppable (options)...........................................475 Options gérant le comportement des éléments de dépôt................... 475 Options indiquant quels éléments peuvent être déposés.................. 476 Options gérant l apparence des éléments de dépôt....................... 476 Options gérant les événements sur les éléments de dépôt.................. 476 droppable ("action", params).....................................477 Gestion des événements sur les éléments de dépôt avec bind ().............478 Exemples d utilisation de la fonctionnalité de drop (déposer) : un panier d achats................................................479 Créer un panier d achats avec glisser-déposer.........................479 Ajouter un comportement au panier lors du dépôt.....................481 Retirer un élément du panier....................................483 CHAPITRE 23 Sélection multiple... 485 Principe de base.................................................485 Mise en forme du contenu.........................................487 La méthode selectable ()...........................................489 selectable (options)............................................490 Options gérant les éléments sélectionnés.............................. 490 Options gérant les événements sur les éléments sélectionnés............... 490 selectable ("action", params).....................................491 Gestion des événements lors de la sélection avec bind ()..................492 Exemples d utilisation du mécanisme de sélection.......................492 Afficher l ordre d apparition des événements lors de la sélection...........492 Empêcher la sélection d un élément...............................495 Inhiber le clic sur un élément pour le sélectionner.....................497 Gérer un panier d achats........................................498 CHAPITRE 24 Permutation d éléments dans la page... 501 Principe de base.................................................501 Mise en forme du contenu.........................................503 La méthode sortable ()............................................505 sortable (options).............................................505 Options spécifiant et gérant les éléments déplaçables.................... 505
Table des matières XXV Options spécifiant et gérant les éléments permutables................... 507 Options gérant la place laissée vide par l élément déplacé................ 507 Options gérant l effet à la fin du déplacement......................... 508 Options gérant les contraintes de déplacement......................... 508 Options gérant le défilement de la fenêtre lors du déplacement............ 509 Options gérant les événements sur les éléments permutables.............. 509 sortable ("action", params)......................................510 Gestion des événements lors de la permutation avec bind ()...............511 Exemples d utilisation du mécanisme de permutation....................512 Afficher l ordre d apparition des événements.........................512 Lors de la permutation dans une seule liste........................... 512 Lors de la permutation entre deux listes............................. 515 Déposer dans la liste un élément quelconque.........................518 Insérer des images dans une liste de titres............................ 518 Ajouter un traitement visuel...................................... 522 CHAPITRE 25 Redimensionnement... 527 Principe de base.................................................527 Mise en forme du contenu.........................................528 La méthode resizable ()............................................530 resizable (options)............................................531 Options gérant les éléments redimensionnables........................ 531 Options gérant l effet lors du redimensionnement...................... 532 Options gérant les événements sur l élément redimensionné.............. 533 resizable ("action", params)......................................534 Gestion des événements lors du redimensionnement avec bind ()...........534 Exemples d utilisation du mécanisme de redimensionnement..............534 Afficher les dimensions de l élément lors du redimensionnement..........534 Afficher la position de l élément lors du redimensionnement.............536 Effectuer une animation lors du redimensionnement...................537 Créer un champ de saisie redimensionnable.........................539 Saisie sur une seule ligne......................................... 539 Saisie multiligne............................................... 541 CHAPITRE 26 Effets visuels dans jquery UI... 543 De nouveaux effets avec la méthode effect (effectname, options, duration, callback).........................543 Effet blind..................................................544
1 Philosophie et principes de base Ce chapitre, fondamental pour comprendre la suite de cet ouvrage, explique les principes de base de jquery qui seront utilisés dans les chapitres suivants. Installation de jquery Vous pouvez télécharger jquery à l adresse http://jquery.com. Deux versions sont disponibles : une version compressée (32 Ko), et l autre non (247 Ko). Renommez celle utilisée en jquery.js. Ce fichier sera inclus dans votre page HTML de la façon classique : Inclusion de la bibliothèque jquery dans la page HTML <script src=jquery.js></script> Une fois la bibliothèque incluse, ses fonctionnalités sont accessibles dans les scripts de la page.
4 Les bases de jquery PREMIÈRE PARTIE L objet jquery Les méthodes de la bibliothèque jquery s utilisent à travers l objet jquery, créé dès l inclusion du fichier JavaScript jquery.js. Il est défini en tant qu objet de type Function (une fonction classique JavaScript) : Définition de l objet jquery dans jquery.js var jquery = function( selector, context ) { // The jquery object is actually just the init constructor 'enhanced' return new jquery.fn.init( selector, context ); } L objet jquery s utilise à deux niveaux : En tant qu objet, il possède des propriétés et des méthodes qui s utiliseront sous la forme jquery.property (pour utiliser une propriété de l objet jquery) ou jquery.method () (pour appeler une méthode définie sur l objet jquery). En tant que fonction, il peut être appelé sous la forme jquery (selector, context) (selector et context étant optionnels). L appel de cette fonction retourne un nouvel objet de classe jquery (comme on peut le voir dans le morceau de code ci-dessus) qui pourra utiliser les propriétés et les méthodes mises à sa disposition. Remarquons que les propriétés et les méthodes utilisables sur l objet jquery ne sont pas les mêmes que celles utilisables sur l objet retourné par la fonction jquery (). En effet, en tant que fonction, l objet de classe jquery retourné par la fonction utilisera les paramètres fournis lors de l appel (ici selector et context), tandis qu en tant qu objet, il n a pas connaissance de paramètres transmis et son utilisation est alors différente. Donc, en tant qu objet, il sera utilisé pour accéder à des fonctionnalités globales comme la gestion de chaînes de caractères, des tableaux, etc., tandis qu en tant que fonction, il sera utilisé pour gérer les éléments HTML de la page (ceux qui correspondent aux deux paramètres selector et context indiqués). L utilisation de l objet jquery est traitée dans le chapitre 2, tandis que celle de la fonction jquery () fait l objet de tous les autres chapitres de cette première partie. $ comme raccourci Vous avez compris, grâce aux précédentes lignes, que nous allons souvent utiliser l objet ou la fonction jquery dans nos futurs scripts JavaScript. Les concepteurs de jquery nous facilitent la tâche en nous permettant d utiliser un raccourci : la variable $.
Philosophie et principes de base CHAPITRE 1 5 Donc, pour l objet jquery, on pourra utiliser : $.method (); // équivaut à jquery.method (); $.property; // équivaut à jquery.property; Et pour la fonction jquery () : $().method (); // équivaut à jquery ().method (); $().property; // équivaut à jquery ().property; Dans le cas de l utilisation de la fonction jquery (), les paramètres selector et context peuvent, bien sûr, être indiqués : $(selector, context).method (); $(selector, context).property; Chaînage des méthodes On a vu que la fonction jquery () retournait un objet de classe jquery qui pourra utiliser les propriétés et les méthodes définies sur les objets de classe jquery. Plus généralement, la plupart des méthodes des objets de classe jquery retournent aussi un objet de classe jquery (la construction des méthodes de jquery est faite en ce sens). En conséquence, les méthodes des objets de classe jquery pourront être chaînées les unes à la suite des autres. Chaînage des méthodes $(selector, context).method1 (params1).method2 (params2).method3 (params3)... Chacune des méthodes retournant un objet de classe jquery, les autres méthodes sont donc aussi accessibles sur cet objet (qui bénéficie du sélecteur selector et du contexte context indiqués lors du premier appel). Propriétés et méthodes de l objet jquery Il est intéressant de visualiser les propriétés et les méthodes définies sur l objet jquery.
6 Les bases de jquery PREMIÈRE PARTIE Affichage des propriétés et méthodes définies sur l objet jquery <script src=jquery.js></script> <script> var txt = "Dans l objet jquery :\n\n"; for (var prop in jquery) txt += prop + ", "; alert (txt); </script> La fenêtre d alerte affichée est représentée sur la figure 1-1. Figure 1 1 Propriétés et méthodes de l objet jquery Ce sont les propriétés et les méthodes qui sont générales, c est-à-dire non rattachées aux éléments de la page HTML. Les méthodes rattachées aux éléments de la page HTML seront accessibles via l objet retourné par la fonction jquery (), comme nous allons le voir ci-après. Si nous remplaçons jquery par $, le résultat est identique.
Philosophie et principes de base CHAPITRE 1 7 Propriétés et méthodes de l objet retourné par jquery () Modifions légèrement le précédent programme pour afficher les propriétés et les méthodes disponibles sur l objet de classe jquery retourné par la fonction jquery () : Affichage des propriétés et méthodes définies sur l objet retourné par jquery () <script src=jquery.js></script> <script> var txt = "Dans l objet retourné par jquery () :\n\n"; for (var prop in jquery ()) txt += prop + ", "; alert (txt); </script> Nous avons simplement remplacé jquery par jquery (). On obtient l affichage représenté sur la figure 1-2. Figure 1 2 Propriétés et méthodes de l objet retourné par la fonction jquery ()
8 Les bases de jquery PREMIÈRE PARTIE Nous constatons que ce ne sont pas les mêmes propriétés et méthodes que celles de l objet jquery. Comme nous le verrons dans les prochains chapitres, ces propriétés et méthodes s utilisent pour la gestion des éléments HTML de la page. Si nous remplaçons jquery () par $ (), le résultat est identique. Quelques vérifications Nous effectuons ici quelques vérifications permettant de s assurer qu on a bien compris le fonctionnement interne de l objet jquery et de la fonction jquery (). jquery () retourne une instance d un objet de classe jquery alert (jquery () instanceof jquery); // true Comme nous l avons indiqué dans les pages précédentes, l appel de la fonction jquery () crée en mémoire un objet de classe jquery (retourné par la fonction). jquery () retourne une instance d objet différente à chaque appel alert (jquery () == jquery ()); // false Chaque appel à la fonction jquery () retourne un nouvel objet de classe jquery. Il est donc normal que deux appels (même successifs) retournent deux objets différents : ils ont les mêmes fonctionnalités (même propriétés et méthodes), mais pas la même adresse mémoire. jquery n est pas un objet de classe jquery alert (jquery instanceof jquery); // false L objet jquery n est pas un objet de classe jquery, mais de classe Function. jquery est un objet de classe Function alert (jquery instanceof Function); // true L objet jquery est défini comme étant une fonction JavaScript, il est donc normal qu il soit vu comme un objet de classe Function. Cela explique que les propriétés et méthodes définies sur l objet jquery ne soient pas les mêmes que celles définies sur les objets de classe jquery (retournés par la fonction jquery ()).
Philosophie et principes de base CHAPITRE 1 9 jquery est équivalent à $ alert (jquery == $); // true L objet jquery peut être remplacé par le signe $ qui est un raccourci. C est également vrai pour la fonction jquery () qui peut aussi être écrite $ (). Philosophie générale de jquery Il est important de bien comprendre la philosophie générale de jquery, et elle est simple. Tout devient alors très facile! Distinguer l objet jquery et la fonction jquery () On distingue l objet jquery et la fonction jquery (). L objet sert à accéder aux méthodes utilitaires (tableaux, chaînes de caractères), la fonction sert à manipuler le DOM (Document Object Model), c est-à-dire l arborescence HTML du document. La fonction jquery () et ses méthodes La fonction jquery (), sous la forme jquery (selector, context), permet d accéder à un ensemble d éléments HTML de l arborescence du document. Sur cette fonction (qui est aussi un objet de classe Object, comme toute fonction Java- Script), des méthodes ont été définies. Elles peuvent être divisées en deux grands ensembles : Le premier sert à préciser les éléments HTML de l arborescence sur lesquels on souhaite travailler. Ces méthodes permettent d ajouter, de supprimer, de dupliquer ou de remplacer des éléments HTML dans la liste des éléments déjà récupérés par le premier appel à jquery (selector, context). Si on ne souhaite pas modifier l ensemble des éléments obtenus par jquery (selector, context), il n est pas nécessaire d utiliser les méthodes qui sont dans ce groupe. Le second permet de réellement travailler sur les éléments HTML récupérés précédemment. On pourra, par exemple, changer le style de ces éléments, les attributs et les dimensions, gérer des événements, produire des effets, etc. Il est évident qu il sera nécessaire d utiliser les méthodes de ce groupe, car ce sont elles qui font les traitements!
10 Les bases de jquery PREMIÈRE PARTIE Et maintenant? Voilà, vous savez tout, du moins l essentiel pour comprendre facilement la suite de cet ouvrage. Et vous l avez compris, nous allons immédiatement débuter par l étude de l objet jquery, qui sera suivie par celle de la fonction jquery ().
10 Objets Deferred Les objets Deferred permettent de gérer la synchronisation d actions. Il est ainsi possible, par exemple, d effectuer deux appels Ajax simultanés vers un serveur et de réaliser un traitement une fois les deux appels terminés. Plutôt que de gérer des variables mémorisant la fin de chaque appel Ajax, on utilisera les objets Deferred implémentés par jquery. Créer un objet Deferred On utilisera la méthode $.Deferred (). Elle retourne un objet Deferred qui permettra d effectuer une synchronisation : var def = $.Deferred (); Méthodes définies sur l objet Deferred Utilisons la méthode $.each () afin de visualiser les propriétés et les méthodes définies sur les objets Deferred.
250 Les bases de jquery PREMIÈRE PARTIE Afficher les propriétés et méthodes définies sur les objets Deferred <script src=jquery.js></script> <script> var def = $.Deferred (); var txt = "Méthodes définies sur l objet Deferred :\n\n"; $.each (def, function (key, value) { if ($.isfunction (value)) txt += key + " ()"; else txt += key; txt += "\n"; }); alert (txt); </script> Figure 10 1 Méthodes définies sur l objet Deferred À SUIVRE Méthodes définies sur l objet jquery On constate que seules des méthodes ont été définies sur cet objet par jquery. Ce sont elles que nous allons étudier dans la suite de ce chapitre.
Objets Deferred CHAPITRE 10 251 Cycle de vie d un objet Deferred Une fois créé, un objet Deferred entre dans un cycle de vie géré par jquery. Certaines des méthodes listées précédemment permettent de modifier l état de l objet au cours de son cycle de vie. Un objet Deferred peut être dans un des trois états suivants. Tableau 10 1 États d un objet Defered État pending resolved rejected Signification L objet est en attente, c est l état dans lequel il se trouve à sa création par $.Deferred (). L objet est dit «résolu». Il a été amené dans cet état suite à l appel de la méthode resolve () ou resolvewith () sur l objet. Une fois dans cet état, il ne peut plus en changer. L objet est dit «rejeté». Il a été amené dans cet état suite à l appel de la méthode reject () ou rejectwith () sur l objet. Une fois dans cet état, il ne peut plus en changer. Remarquons que l on ne peut plus modifier l état d un objet s il est dans l état resolved ou rejected. Ces deux états sont considérés comme finaux (on ne peut plus en changer). La figure 10-2 représente l enchaînement des états en fonction des méthodes appelées sur l objet Deferred. Figure 10 2 Cycle de vie de l objet Deferred
252 Les bases de jquery PREMIÈRE PARTIE Les méthodes de type resolve () ou reject () permettent de modifier l état de l objet Deferred. Elles sont décrites dans le tableau suivant. Méthode resolve (args) Le programme qui suit permet de visualiser l état de l objet Deferred lorsque les méthodes précédentes lui sont appliquées. Afficher l état de l objet Deferred Tableau 10 2 États d un objet Defered Fonctionnalité Passe l objet Deferred dans l état résolu (resolved). Les méthodes done (donecallbacks), then (donecallbacks, failcallbacks) et always (alwayscallbacks) sont appelées, en exécutant les fonctions de callback définies dans les paramètres donecallbacks et alwayscallbacks. Le paramètre args (optionnel, une ou plusieurs valeurs séparées par des virgules ou dans un tableau) est transmis à chacune des fonctions de callback. La valeur this dans chacune des fonctions de callback correspond à l objet Deferred. resolvewith (context, args) Identique à resolve (args), sauf que la valeur this dans chacune des fonctions de callback correspond à l objet context indiqué en paramètre. Le paramètre args est, dans ce cas, obligatoirement un tableau de valeurs. reject (args) Passe l objet Deferred dans l état rejeté (rejected). Les méthodes fail (failcallbacks), then (donecallbacks, failcallbacks) et always (alwayscallbacks) sont appelées, en exécutant les fonctions de callback définies dans les paramètres failcallbacks et alwayscallbacks. Le paramètre args (optionnel, une ou plusieurs valeurs séparées par des virgules ou dans un tableau) est transmis à chacune des fonctions de callback. rejectwith (context, args) Identique à reject (args), sauf que la valeur this dans chacune des fonctions de callback correspond à l objet context indiqué en paramètre. Le paramètre args est, dans ce cas, obligatoirement un tableau de valeurs. <script src=jquery.js></script> <script> // création d un objet Deferred : il est dans l état pending var def = $.Deferred (); alert (def.state ()); // pending
Objets Deferred CHAPITRE 10 253 // passage de l objet dans l état resolved def.resolve (); alert (def.state ()); // resolved // tentative de passage de l objet dans l état rejected : // il reste dans l état resolved car on ne peut plus le changer d état def.reject (); alert (def.state ()); // resolved </script> Une fois l objet Deferred passé dans l état resolved (ou rejected), il ne peut plus en changer. Par conséquent, l instruction def.reject () appelée après l instruction def.resolve () est inopérante. Fonctions de callback associées aux états de l objet Deferred Lorsque l objet Deferred change d état (c est-à-dire passe dans l état resolved ou rejected), les fonctions de callback définies par les méthodes then (), done (), fail () ou always () sont appelées. Trois types de fonctions de callback peuvent être définis dans ces méthodes : les fonctions de callback de type donecallbacks, qui sont exécutées uniquement si l objet passe dans l état resolved ; les fonctions de callback de type failcallbacks, qui sont exécutées uniquement si l objet passe dans l état rejected ; les fonctions de callback de type alwayscallbacks, qui sont exécutées dans tous les cas, que l objet passe dans l état resolved ou rejected. Toutes ces fonctions de callback reçoivent en paramètre l objet args transmis en argument des méthodes resolve (args) ou resolvewith (context, args) et reject (args) ou rejectwith (context, args). La valeur this dans les fonctions de callback correspond à l objet Deferred (pour les fonctions appelées suite à resolve () ou reject ()) ou au paramètre context indiqué dans la méthode (pour les fonctions appelées suite à resolvewith () ou rejectwith ()). Ces fonctions de callback peuvent être définies avant ou après le changement d état de l objet. Elles sont dans tous les cas appelées si l objet Deferred est dans l état correspondant.
254 Les bases de jquery PREMIÈRE PARTIE Tableau 10 3 Méthodes permettant de définir les fonctions de callback sur les changements d état de l objet Deferred Méthode done (donecallbacks) fail (failcallbacks) then (donecallbacks, failcallbacks) always (alwayscallbacks) Fonctionnalité Permet de définir les fonctions de callback qui seront appelées uniquement si l objet Deferred passe dans l état resolved. Le paramètre donecallbacks correspond à une ou plusieurs fonctions de callback (séparées par des virgules) ou à un tableau de fonctions. Permet de définir les fonctions de callback qui seront appelées uniquement si l objet Deferred passe dans l état rejected. Le paramètre failcallbacks correspond à une ou plusieurs fonctions de callback (séparées par des virgules) ou à un tableau de fonctions. Permet de définir les fonctions de callback qui seront appelées uniquement si l objet Deferred passe dans l état resolved (pour les fonctions indiquées dans le paramètre donecallbacks) ou dans l état rejected (pour les fonctions indiquées dans le paramètre failcallbacks). Les paramètres donecallbacks et failcallbacks correspondent à une seule fonction de callback ou à un tableau de fonctions. Permet de définir les fonctions de callback qui seront appelées dans tous les cas (que l objet Deferred passe dans l état resolved ou rejected). Le paramètre alwayscallbacks correspond à une ou plusieurs fonctions de callback (séparées par des virgules) ou à un tableau de fonctions. Des exemples de ces fonctions seront présentés par la suite (voir la section «Exemples d utilisation...»). Fonctions de callback associées aux notifications effectuées sur l objet Deferred En plus des fonctions de callback précédentes associées aux changements d état de l objet Deferred, jquery (à partir de la version 1.7) permet d associer des fonctions de callback qui ne sont pas directement exécutées suite à un changement d état de l objet Deferred, mais suite à des notifications qui lui sont envoyées par les méthodes notify (args) et notifywith (args). Le positionnement de ces fonctions de callback est effectué au moyen de la méthode progress (progresscallbacks). Elles peuvent également être positionnées par la nouvelle forme de la méthode then (), qui est maintenant then (donecallbacks, failcallbacks, progresscallbacks).
Objets Deferred CHAPITRE 10 255 Tableau 10 4 Déclencher une notification sur l objet Deferred Méthode notify (args) notifywith (context, args) Fonctionnalité Envoie une notification à l objet Deferred. Les méthodes done (donecallbacks), then (donecallbacks, failcallbacks) et always (alwayscallbacks) sont appelées, en exécutant les fonctions de callback définies dans les paramètres donecallbacks et alwayscallbacks. Le paramètre args (optionnel) est transmis à chacune des fonctions de callback. La valeur this dans chacune des fonctions de callback correspond à l objet Deferred. Identique à resolve (args), sauf que la valeur this dans chacune des fonctions de callback correspond à l objet context indiqué en paramètre. Tableau 10 5 Récupérer une notification reçue par l objet Deferred dans une fonction de callback Méthode progress (progresscallbacks) then (donecallbacks, failcallbacks, progresscallbacks) Fonctionnalité Permet de définir les fonctions de callback qui seront appelées lorsque des notifications sont envoyées sur l objet Deferred (par notify (args) ou notifywith (args)). Le paramètre progresscallbacks correspond à une ou plusieurs fonctions de callback (séparées par des virgules) ou à un tableau de fonctions. Fonctionnement similaire à celui de then (donecallbacks, failcallbacks), avec en plus la possibilité de traiter les notifications reçues dans les fonctions de callback indiquées dans le paramètre progresscallbacks. Ce paramètre correspond à une seule fonction de callback ou à un tableau de fonctions. À SAVOIR Notifications Un objet Deferred dans l état resolved ou rejected ne peut plus recevoir de notifications. Si vous essayez d en émettre au moyen de notify () ou notifywith (), les fonctions de callback associées ne seront pas appelées. Des exemples de ces fonctions seront présentés ci-après.
256 Les bases de jquery PREMIÈRE PARTIE Exemples d utilisation des fonctions de callback associées à l objet Deferred Ajouter une fonction de callback sur l objet Deferred Nous souhaitons effectuer un traitement lorsque l objet Deferred est dans l état resolved, et un autre traitement si l objet est dans l état rejected. Pour cet exemple, nous utiliserons les méthodes done () et then (). Effectuer un traitement au moyen des méthodes done () et then () <script src=jquery.js></script> <script> var def = $.Deferred (); // ajout d un traitement lorsque l objet Deferred est dans l état resolved def.done (function () { alert ("Appel done ()"); }); def.resolve (); def.reject (); // non pris en compte car l objet Deferred est déjà dans // l état resolved // ajout d un traitement lorsque l objet Deferred est dans l état resolved, // puis d un autre traitement si l objet est dans l état rejected def.then (function () { alert ("Appel done () dans then ()"); }, function () { alert ("Appel fail () dans then ()"); }); </script>
14 Onglets Les pages HTML comportant des onglets (tabs) sont devenues courantes dans les sites web actuels. Elles permettent d assurer une meilleure compréhension des informations affichées, en les regroupant par onglets. Principe de base Supposons qu on veuille écrire le code HTML permettant d afficher les onglets représentés sur la figure 14-1. Nous avons une barre d onglets (contenant ici trois onglets), puis un contenu différent pour chacun des onglets. Figure 14 1 Onglets dans une page HTML
318 jquery UI : pour des fonctionnalités graphiques avancées DEUXIÈME PARTIE JQuery UI demande d écrire ceci de la façon suivante : un bloc <div> global encadrant le tout ; une <ul> pour former la barre d onglets ; autant de <li> que d onglets ; autant de <div> que de fenêtres contenant les onglets. Page HTML composée de trois onglets <script src = jquery.js></script> <script src = jqueryui/js/jquery-ui-1.8.16.custom.min.js></script> <link rel=stylesheet type=text/css href=jqueryui/css/smoothness/jquery-ui-1.8.16.custom.css /> <div id=tabs> <ul> <li><a href=#tab1>tab 1</a></li> <li><a href=#tab2>tab 2</a></li> <li><a href=#tab3>tab 3</a></li> </ul> <div id=tab1>contenu du premier onglet</div> <div id=tab2>contenu du deuxième onglet</div> <div id=tab3>contenu du troisième onglet</div> </div> <script> </script> Or, si nous affichons la page dans un navigateur (figure 14-2), cela ne s affiche pas tout à fait comme prévu... tout simplement car il ne faut pas oublier de signaler, dans la page HTML, que cet affichage doit s effectuer selon les conventions de jquery UI. Figure 14 2 Les onglets ne s affichent pas dans la page HTML.
Onglets CHAPITRE 14 319 Cela s effectue en indiquant que le <div> global est géré par la méthode tabs () de jquery UI. On ajoute donc la ligne suivante dans la partie <script> de la page (jusqu alors vide) : Faire appel à la méthode tabs () de jquery UI pour gérer un élément HTML avec des onglets <script> $("#tabs").tabs (); </script> La page s affiche alors avec les onglets, comme sur la figure 14-1. À SAVOIR Méthode tabs () La méthode tabs () est une des nombreuses méthodes de jquery UI, qui s utilise sur un objet de classe jquery retourné par la fonction jquery (). Les éléments de la liste associée sont alors transformés en onglets, avec une gestion automatique des clics sur ceux-ci (pour passer d un onglet à l autre) gérée de façon transparente par jquery UI. Mise en forme du contenu L utilisation de la méthode tabs () modifie de façon radicale l aspect des éléments HTML écrits dans la page. En effet, cette méthode parcourt (en interne dans jquery UI) le code HTML et ajoute aux éléments concernés (ici, les onglets) de nouvelles classes CSS qui leur donnent le style adéquat. La figure 14-3 (page suivante) représente un exemple de code HTML généré par jquery UI après avoir été modifié par l instruction tabs () (ce code a été récupéré au moyen de Firebug associé à Firefox). Ensuite, il est possible d utiliser les classes CSS des éléments afin de personnaliser l affichage. Par exemple, si nous modifions la classe CSS ui-state-default, associée aux éléments <li>, nous devrions obtenir un nouvel aspect pour les onglets. De même pour le contenu de ces onglets, si on modifie la classe CSS ui-tabs-panel, associée aux éléments <div>.
320 jquery UI : pour des fonctionnalités graphiques avancées DEUXIÈME PARTIE Figure 14 3 Code HTML généré par la méthode tabs () Modifions ces éléments dans le code HTML en ajoutant une balise <style> : Modification du style des onglets <script src=jquery.js></script> <script src=jqueryui/development-bundle/ui/jquery-ui-1.8.16.custom.js></script> <link rel=stylesheet type=text/css href="jqueryui/development-bundle/themes/smoothness/jquery.ui.all.css" /> <style type=text/css> li.ui-state-default { font-size : 10px; } div.ui-tabs-panel { font-size : 15px; font-family : georgia; font-style : italic; } </style> <div id=tabs> <ul> <li><a href=#tab1>tab 1</a></li> <li><a href=#tab2>tab 2</a></li> <li><a href=#tab3>tab 3</a></li> </ul> <div id=tab1>contenu du premier onglet</div>
Onglets CHAPITRE 14 321 <div id=tab2>contenu du deuxième onglet</div> <div id=tab3>contenu du troisième onglet</div> </div> <script> $("#tabs").tabs (); </script> REMARQUE Emplacement de la balise <style> Le code HTML est identique au précédent, sauf que nous avons ajouté la balise <style> après l inclusion des styles de jquery UI. Notez que l ajout de nos propres styles doit se faire après ceux de jquery UI, sinon notre modification ne sera pas prise en compte. Comme le montre la figure 14-4, l apparence des onglets et de leur contenu a été modifiée en fonction du nouveau style. Figure 14 4 L apparence des onglets a été personnalisée. La méthode tabs () Cette méthode peut s utiliser sous les deux formes suivantes : Première forme $(selector, context).tabs (options); Seconde forme $(selector, context).tabs ("action", params);
322 jquery UI : pour des fonctionnalités graphiques avancées DEUXIÈME PARTIE tabs (options) La méthode tabs (options) est utilisée pour déclarer qu un élément HTML (et son contenu) doit être géré sous forme d onglets. Le paramètre options est un objet permettant de spécifier une apparence et un comportement aux onglets concernés. Différents types d options sont disponibles, selon qu elles gèrent les onglets directement ou les événements liés aux onglets. Options gérant les onglets Tableau 14 1 Gestion des onglets Options options.collapsible options.disabled options.selected options.event options.fx options.ajaxoptions Fonction Paramétrée à true, elle autorise les onglets à être désélectionnés. Par défaut, elle est à false : le clic sur un onglet sélectionné ne le désélectionne pas. Indique, dans un tableau, les index des onglets désactivés (c est-à-dire ceux qui ne pourront pas être sélectionnés). Par exemple, [0, 1] permet de désactiver les deux premiers onglets. Indique l index du premier onglet sélectionné : par défaut 0, c est-à-dire le premier onglet. Nom de l événement qui permet de sélectionner un nouvel onglet (par défaut "click"). Si, par exemple, on indique "mouseover", l onglet sera sélectionné lors de son survol par la souris. Indique un effet lors de la sélection de l onglet, tel qu un affichage progressif de l onglet et de son contenu, par exemple : options.fx = { opacity : "toggle" }. Options de paramétrage pour Ajax, lorsqu on désire mettre à jour le contenu d un onglet par Ajax. On utilisera en particulier options.ajaxoptions.data qui permet de préciser des paramètres envoyés au serveur. Options gérant les événements liés aux onglets Ces méthodes permettent d effectuer un traitement lorsqu un événement se produit dans les onglets, comme la sélection de l un d eux, l ajout d un nouvel onglet, etc. Elles reçoivent le paramètre event correspondant à l événement, suivi de l objet tab qui décrit l onglet sur lequel s est produit l événement. Cet objet tab est composé des propriétés suivantes : index : index de l onglet sur lequel s est produit l événement (à partir de 0) ; panel : élément <div> correspondant au contenu de l onglet.
Onglets CHAPITRE 14 323 Tableau 14 2 Gestion des événements liés aux onglets Options options.select options.show options.add options.remove options.enable options.disable options.load Effet La méthode select (event, tab) est appelée lors de la sélection d un onglet (manuellement ou par la méthode tabs ("select")). La méthode show (event, tab) est appelée lorsque le contenu d un onglet devient visible (manuellement ou lors de l affichage du premier onglet sélectionné ou par l appel d une méthode comme tabs ("select")). La méthode add (event, tab) est appelée lors de l ajout d un onglet dans la liste des onglets (par la méthode tabs ("add")). La méthode remove (event, tab) est appelée lors de la suppression d un onglet dans la liste des onglets (par la méthode tabs ("remove")). La méthode enable (event, tab) est appelée lors de l activation d un onglet dans la liste des onglets (par la méthode tabs ("enable")). La méthode disable (event, tab) est appelée lors de la désactivation d un onglet dans la liste des onglets (par la méthode tabs ("disable")). La méthode load (event, tab) est appelée lors du chargement ou de l affichage d un onglet dans la liste des onglets par Ajax (par la méthode tabs ("load")). tabs ("action", params) La méthode tabs ("action", params) permet d effectuer, au moyen d un programme, une action sur les onglets, telle que sélectionner, désactiver, ajouter ou supprimer un onglet. L action est indiquée sous forme d une chaîne de caractères dans le premier argument (par exemple, "add" pour ajouter un nouvel onglet), tandis que les arguments qui suivent concernent les paramètres de cette action (par exemple, l index de l onglet concerné). L appel de ces méthodes provoque parfois un événement qui porte le même nom que l action correspondante (l événement add est déclenché par l action "add"). Ces événements sont traités par les options vues dans la section précédente. Tableau 14 3 Actions possibles grâce à la méthode tabs ("action", params) Méthode tabs ("add", "#id", title, index) Action Ajouter un onglet à la position indiquée par index (à partir de 0). Les onglets qui suivent ont leur index décalé de 1. "#id" correspond à l identifiant d un <div> qui est associé au contenu de cet onglet (le <div> est créé par jquery UI, son contenu devra être ajouté ultérieurement). Le paramètre title correspond au titre de l onglet. Si le paramètre index n est pas indiqué, l onglet est ajouté à la fin de la liste.
324 jquery UI : pour des fonctionnalités graphiques avancées DEUXIÈME PARTIE Méthode Action tabs ("remove", index) Supprimer l onglet dont l index est indiqué, ainsi que le contenu associé. tabs ("disable", index) Désactiver l onglet dont l index est indiqué. tabs ("enable", index) Rendre actif l onglet dont l index est indiqué. tabs ("select", index) Sélectionner l onglet dont l index est indiqué : son contenu devient alors visible. tabs ("url", index, url) tabs ("load", index) tabs ("rotate", duration, repeat) tabs ("destroy") tabs ("length") Tableau 14 3 Actions possibles grâce à la méthode tabs ("action", params) (suite) Associer le contenu de l onglet dont l URL est indiquée dans le paramètre url. Le contenu de l onglet sera récupéré par Ajax lors de l appel de la méthode tabs ("load", index). Récupèrer le contenu de l onglet par Ajax, en utilisant l URL indiquée par tabs ("url", index, url). Sélectionner périodiquement chacun des onglets, selon une durée indiquée en millisecondes par duration. Si repeat vaut true, le cycle est répétitif, sinon il s effectue une seule fois (valeur par défaut). Supprimer la gestion des onglets. Les onglets redeviennent de simples balises HTML sans classe CSS ni gestion d événements. Retourner le nombre d onglets du premier élément de la liste correspondant au sélecteur utilisé. Gestion des événements dans les onglets avec bind () En plus d offrir des méthodes événementielles dans les options de la méthode tabs (options), jquery UI nous permet de gérer ces événements au moyen de la méthode bind () classique (voir le chapitre 6 sur les événements). jquery UI a créé différents événements, dont voici la liste. Tableau 14 4 Événements jquery UI pour la gestion des onglets Événement tabsselect tabsshow tabsadd tabsremove tabsenable tabsdisable tabsload Description Un onglet a été sélectionné (manuellement ou par la méthode tabs ("select")). Le contenu d un onglet devient visible (manuellement ou lors de l affichage du premier onglet sélectionné, ou encore par l appel d une méthode comme tabs ("select")). Un onglet a été ajouté (par la méthode tabs ("add")). Un onglet a été supprimé (par la méthode tabs ("remove")). Un onglet a été activé (par la méthode tabs ("enable")). Un onglet a été désactivé (par la méthode tabs ("disable")). Le contenu d un onglet a été chargé par Ajax (par la méthode tabs ("load")).
Onglets CHAPITRE 14 325 Ces événements permettent d effectuer des traitements grâce à la fonction de callback que fournit la méthode bind (eventname, callback). Exemples d utilisation des onglets Création dynamique d onglets On souhaite créer un onglet (et son contenu) directement de façon dynamique au moyen de JavaScript. Le code HTML crée initialement trois onglets, tandis que le script JavaScript ajoute le quatrième. Création dynamique d onglet avec tabs () <script src=jquery.js></script> <script src=jqueryui/development-bundle/ui/jquery-ui-1.8.16.custom.js></script> <link rel=stylesheet type=text/css href="jqueryui/development-bundle/themes/smoothness/jquery.ui.all.css" /> <div id=tabs> <ul> <li><a href=#tab1>tab 1</a></li> <li><a href=#tab2>tab 2</a></li> <li><a href=#tab3>tab 3</a></li> </ul> <div id=tab1>contenu du premier onglet</div> <div id=tab2>contenu du deuxième onglet</div> <div id=tab3>contenu du troisième onglet</div> </div> <script> $("#tabs").tabs ({ fx : { opacity : "toggle" }, }).tabs ("add", "#tab4", "Tab 4"); $("<i> Contenu du quatrième onglet</i>").appendto ("#tab4"); </script> Remarquez comme nous avons chaîné la première méthode tabs () avec la seconde. La première méthode tabs () est nécessaire, car elle transforme le code HTML que nous avons écrit en un code affichant des onglets (avec les classes CSS que jquery UI ajoute automatiquement), tandis que la seconde permet d effectuer l action "add" qui ajoute l onglet en fin de liste.
XXVI jquery 1.7 & jquery UI Effet bounce.................................................545 Effet shake..................................................546 Effet clip...................................................546 Effet drop..................................................548 Effet explode................................................549 Effet fold...................................................550 Effet highlight...............................................551 Effet puff...................................................552 Effet pulsate.................................................553 Effet scale..................................................553 Effet size...................................................554 Effet slide..................................................556 Les méthodes show (), hide () et toggle ()..............................556 La méthode animate () améliorée par jquery UI........................558 Propriétés CSS gérant les couleurs................................558 Nouvelles valeurs du paramètre easing..............................560 Produire des effets avec les classes CSS...............................560 Les méthodes addclass (), removeclass () et toggleclass () améliorées.....560 La méthode switchclass ()......................................561 Exemple d utilisation de toggleclass ().............................561 Index... 563