Éric Sarrion. JQuery & JQuery UI. 2 e édition. Groupe Eyrolles, 2011, 2012, ISBN :

Transcription

1 Éric Sarrion JQuery 1. 7 & JQuery UI 2 e édition Groupe Eyrolles, 2011, 2012, ISBN :

2 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.

3 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" " <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.

4 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) ;

5 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 :

6 Table des matières PREMIÈRE PARTIE Les bases de jquery...1 CHAPITRE 1 Philosophie et principes de base... 3 Installation de jquery L objet jquery $ comme raccourci Chaînage des méthodes Propriétés et méthodes de l objet jquery Propriétés et méthodes de l objet retourné par jquery () Quelques vérifications Philosophie générale de jquery Distinguer l objet jquery et la fonction jquery () La fonction jquery () et ses méthodes Et maintenant? CHAPITRE 2 Méthodes utilitaires Manipulation d objets Objets en JavaScript Méthodes disponibles dans jquery $.each () : parcours des propriétés d un objet $.extend () : ajouter des propriétés à un objet Méthodes booléennes Manipulation de tableaux Tableaux en JavaScript Méthodes disponibles dans jquery $.each () : parcours des éléments d un tableau $.grep () : trier un tableau $.map () : créer un nouveau tableau

7 X jquery 1.7 & jquery UI $.merge () : concaténer deux tableaux Manipulation de chaînes de caractères Chaînes de caractères en JavaScript Méthodes disponibles dans jquery $.each () : parcours des caractères dans une chaîne $.trim () : éliminer les espaces en début et en fin de chaîne $.param () : sérialiser les valeurs contenues dans un objet Autres propriétés et méthodes $.browser : récupérer le navigateur utilisé $.noconflict () : éviter les conflits entre jquery et d autres bibliothèques JavaScript $.fn.jquery : récupérer la version de jquery utilisée CHAPITRE 3 Sélecteurs De l importance des sélecteurs Les différents types de sélecteurs Sélecteurs simples Sélecteurs d attributs Sélecteurs de classe Sélecteurs d identifiant Les pseudo-classes Pseudo-classes générales :first-child :last-child :nth-child(an+b) :only-child :not :empty :eq(n) :gt(n) :lt(n) :first :last :even :odd :parent :contains(text) :has(selector) :hidden :visible

8 Table des matières XI :header :animated Pseudo-classes liées aux formulaires Les combinateurs Combinateur de descendance Combinateur filial Combinateur d adjacence directe Combinateur d adjacence indirecte Les sélecteurs multiples Exemples utilisant les sélecteurs CHAPITRE 4 Accéder au DOM Document Object Model : rappels JavaScript Éléments et attributs DOM (Document Object Model) Création dynamique d éléments HTML et texte Méthodes d insertion dans la page Accès direct aux éléments de la page Propriétés principales Exemple : création dynamique dans la page Les différentes formes de la fonction jquery () $(selector, context) $(element) $(elements) $(jqueryobject) $(html) Les méthodes d accès au DOM Supprimer des éléments dans la liste Exemples d utilisation des méthodes filter (selector) filter (callback) not (elements) has (selector) slice (startindex, endindex) Ajouter des éléments dans la liste Exemple d utilisation : add (selector, context) Remplacer les éléments de la liste Exemples d utilisation des méthodes find (selector) parents (selector)

9 XII jquery 1.7 & jquery UI parentsuntil (selector) parent (selector) closest (selector, context) offsetparent () siblings (selector) prev (selector) prevuntil (selector) Autres méthodes Exemples d utilisation des méthodes end () andself () map (callback) CHAPITRE 5 Manipuler le DOM Parcourir les éléments de la collection La méthode each (callback) La propriété length Accès à un élément particulier de la collection Gérer les attributs et propriétés Méthodes gérant les attributs attr (name) attr (name, value) attr (obj) attr (name, callback) Méthodes gérant les propriétés data (key, value) data (obj) data (key) data () Gérer les classes CSS Les méthodes addclass () addclass (name) addclass (callback) Les méthodes removeclass () removeclass () removeclass (name) removeclass (callback) Les méthodes toggleclass () toggleclass (name) toggleclass (name, addorremove)

10 Table des matières XIII toggleclass (callback) toggleclass (callback, addorremove) La méthode hasclass (name) Gérer les styles La méthode css (name) La méthode css (name, value) La méthode css (obj) La méthode css (name, callback) Gérer les dimensions Définition des termes utilisés Hauteur Largeur Méthodes pour gérer la hauteur height () height (value) innerheight () et outerheight () Méthodes pour gérer la largeur Gérer la position offset (coords) position () Gérer le contenu Méthodes gérant le contenu sous forme HTML html () html (html) html (callback) Méthodes gérant le contenu sous forme texte text () text (text) text (callback) Gérer l attribut value des éléments de formulaires val () val (value) val (callback) Gérer l attribut checked des éléments de formulaire Méthodes d insertion dans le DOM Insérer un contenu en début de liste : prepend () et prependto () prepend (html) prepend (element) prepend (jqueryobject) prepend (callback) prependto (element)

11 XIV jquery 1.7 & jquery UI prependto (jqueryobject) prependto (selector) Insérer un contenu en fin de liste : append () et appendto () append (html) append (element) append (jqueryobject) append (callback) appendto (element) appendto (jqueryobject) appendto (selector) Insérer un contenu avant l élément : before () et insertbefore () before (html) before (element) before (jqueryobject) before (callback) insertbefore (element) insertbefore (jqueryobject) insertbefore (selector) Insérer du contenu après l élément : after () et insertafter () after (html) after (element) after (jqueryobject) after (callback) insertafter (element) insertafter (jqueryobject) insertafter (selector) Insérer autour de l élément : wrap () et wrapall () wrap (html) wrap (element) wrap (jqueryobject) wrap (selector) wrap (callback) wrapall (html) wrapall (element) wrapall (jqueryobject) wrapall (selector) wrapall (callback) Insérer autour du contenu de l élément : wrapinner () wrapinner (html) wrapinner (element) wrapinner (jqueryobject)

12 Table des matières XV wrapinner (selector) wrapinner (callback) Remplacer l élément par un autre : replacewith () replacewith (html) replacewith (element) replacewith (jqueryobject) replacewith (callback) Autres méthodes de gestion du DOM CHAPITRE 6 Gestion des événements La gestion des événements en JavaScript Uniformiser la gestion des événements avec la méthode bind (eventname, callback) Le paramètre event Propriétés et méthodes : aperçu général Propagation de l événement Séquence de propagation Éléments impliqués dans la propagation Stopper la propagation de l événement Propriétés du paramètre event Méthodes du paramètre event Transmettre d autres paramètres à un événement avec bind () Événements utilisables dans bind () Événements standards Nouveaux événements Créer et déclencher un nouvel événement Transmettre des paramètres lors du déclenchement Exemples de gestion d événements avec bind () Déplacement d un élément dans la page Affichage d un menu Supprimer un gestionnaire d événement avec unbind () Utiliser des catégories dans les noms d événements S assurer de l accessibilité des éléments HTML avec $(document).ready (callback) Autres méthodes de gestion d événements Gestion avancée des événements avec jquery

13 XVI jquery 1.7 & jquery UI CHAPITRE 7 Requêtes serveur avec Ajax Mise en place d un serveur Installer un serveur avec PHP Installer un serveur avec Ruby on Rails Requêtes Ajax avec $.ajax (options) Options disponibles Configuration générale de la requête Fonctions de callback permettant un traitement Paramétrage du serveur Séquence d appel des fonctions de callback Serveur fonctionnant avec PHP Serveur fonctionnant avec Ruby on Rails Traiter la réponse du serveur Récupérer et utiliser responsetext Serveur en PHP Serveur avec Ruby on Rails Récupérer responsexml Serveur en PHP Serveur avec Ruby on Rails Utiliser responsexml Serveur en PHP Serveur avec Ruby on Rails responsetext ou responsexml? Utiliser JSON Transmettre des paramètres au serveur Serveur en PHP Serveur avec Ruby on Rails Mises à jour avec load (url, data, success) Événements Ajax CHAPITRE 8 Produire des effets visuels Effets visuels standards définis par jquery Effets sur la hauteur : slideup (), slidedown () et slidetoggle () Faire disparaître des éléments avec slideup () Faire apparaître des éléments avec slidedown () Faire apparaître ou disparaître des éléments avec slidetoggle () Effets d opacité : fadein (), fadeout () et fadeto () Faire apparaître des éléments avec fadein ()

14 Table des matières XVII Faire disparaître des éléments avec fadeout () Modifier progressivement l opacité des éléments avec fadeto () Effets combinant hauteur et opacité : show (), hide () et toggle () Faire apparaître des éléments avec show () Faire disparaître des éléments avec hide () Faire apparaître ou disparaître des éléments avec toggle () Enchaînements d effets standards Principe de fonctionnement Exemple d utilisation : effet blink Créer ses propres effets visuels avec jquery Créer ses propres effets avec animate () Décrire le style final des éléments (paramètre objstyle) Utiliser des valeurs numériques Utiliser des valeurs relatives Paramétrer la progression dans l effet avec easing Utiliser easing de manière globale Utiliser easing de manière locale Enchaînement d effets avec animate () Gérer la file d attente des effets visuels Exécuter des effets simultanés sur les mêmes éléments HTML Arrêter l exécution d un effet avec stop () Différer l exécution d un effet avec delay () CHAPITRE 9 Créer un plug-in jquery Que peut-on ajouter avec un plug-in? Ajouter de nouvelles méthodes à l objet jquery Créer une seule méthode sur l objet jquery Créer plusieurs méthodes sur l objet jquery Ajouter de nouvelles méthodes aux objets de classe jquery Créer de nouvelles méthodes sur les objets de classe jquery Créer la méthode dans jquery.fn Accéder aux éléments HTML dans la méthode Permettre le chaînage des méthodes Ajouter de nouvelles pseudo-classes Créer de nouvelles pseudo-classes Pseudo-classe sans paramètre Pseudo-classe avec paramètre Diffuser un plug-in Création du fichier du plug-in Et si jquery ou $ n est plus accessible?

15 XVIII jquery 1.7 & jquery UI CHAPITRE 10 Objets Deferred Créer un objet Deferred Méthodes définies sur l objet Deferred Cycle de vie d un objet Deferred Fonctions de callback associées aux états de l objet Deferred Fonctions de callback associées aux notifications effectuées sur l objet Deferred Exemples d utilisation des fonctions de callback associées à l objet Deferred Ajouter une fonction de callback sur l objet Deferred Transmettre des paramètres à la fonction de callback Un objet Deferred dans l état resolved ou rejected ne peut plus recevoir de nouvelles notifications Ajouter des fonctions de callback à l objet Deferred dans l état resolved ou rejected Objets Deferred liés à Ajax Objets Promise Créer un objet Promise à partir d un objet Deferred Créer un objet Promise à partir d un objet de classe jquery Ajouter des méthodes de traitement aux objets de classe jquery Synchroniser plusieurs objets Deferred avec $.when () Utiliser les résultats fournis dans les fonctions de callback Synchronisation de deux appels Ajax Utiliser les résultats des appels Ajax synchronisés dans les fonctions de callback Exemple d utilisation des objets Deferred dans nos programmes CHAPITRE 11 Objets Callbacks Créer un objet Callbacks Méthodes définies sur l objet Callbacks Options de création de l objet Callbacks Utiliser le flag once Utiliser le flag memory Utiliser le flag stoponfalse Combiner plusieurs flags Exemple d utilisation des objets Callbacks dans nos programmes

16 Table des matières XIX CHAPITRE 12 Exemple d application utilisant jquery, Ajax et PHP Cinématique de l application Affichage de la liste des clients Côté client (navigateur) Côté serveur Ajout d une nouvelle ligne vierge à l affichage Gestion de la modification du nom, du prénom ou du numéro de téléphone..293 Côté client (navigateur) Côté serveur Gestion de la suppression d un client Côté client (navigateur) Côté serveur Application complète DEUXIÈME PARTIE jquery UI : pour des fonctionnalités graphiques avancées CHAPITRE 13 Introduction à jquery UI Installation de jquery UI Aperçu de jquery UI Qu est-ce qu un un thème CSS? Quels fichiers inclure dans nos pages HTML? Fichiers non compressés Fichiers JavaScript Fichiers CSS Exemple de page HTML incluant les fichiers non compressés Fichiers compressés Fichiers JavaScript Fichiers CSS Exemple de page HTML incluant les fichiers compressés Changer de thème CSS Et maintenant? CHAPITRE 14 Onglets Principe de base

17 XX jquery 1.7 & jquery UI Mise en forme du contenu La méthode tabs () tabs (options) Options gérant les onglets Options gérant les événements liés aux onglets tabs ("action", params) Gestion des événements dans les onglets avec bind () Exemples d utilisation des onglets Création dynamique d onglets Modifier le contenu d un onglet au moyen d Ajax Exemple 1 : appel au serveur avec "url" et "load" Exemple 2 : ajouter des informations avec la propriété data de ajaxoptions Utiliser les événements sur les onglets Exemple 1 : utiliser l événement add Exemple 2 : événement tabsadd avec la méthode bind () CHAPITRE 15 Menus en accordéon Principe de base Mise en forme du contenu La méthode accordion () accordion (options) Options gérant les menus Options gérant la hauteur du contenu des menus Options gérant les événements liés aux menus accordion ("action", params) Gestion des événements dans les menus avec bind () Exemples d utilisation des menus en accordéon Ouvrir un menu quelconque Charger le contenu d un menu avec Ajax Exemple 1 : options.change et options.changestart Exemple 2 : accordionchange et accordionchangestart avec la méthode bind (). 344 CHAPITRE 16 Boîtes de dialogue Principe de base Mise en forme du contenu La méthode dialog () dialog (options) Options gérant l aspect, la position et les dimensions de la fenêtre

18 Table des matières XXI Options gérant les effets visuels sur la fenêtre Options gérant le comportement de la fenêtre Options gérant les événements dans la fenêtre dialog ("action", params) Gestion des événements dans les boîtes de dialogue avec bind () Exemples d utilisation des boîtes de dialogue Ouvrir et fermer une fenêtre Appliquer un effet à l ouverture ou à la fermeture de la fenêtre Empêcher la fermeture de la fenêtre Masquer le bouton de fermeture de la fenêtre Insérer des boutons dans la fenêtre Insérer un contenu au moyen d Ajax Modifier le comportement d une fenêtre avec des effets CHAPITRE 17 Boutons Principe de base Mise en forme du contenu La méthode button () button (options) button ("action", params) Gestion des événements sur les boutons avec bind () Boutons radio Afficher des boutons radio Améliorer l affichage avec buttonset () Cases à cocher Afficher des cases à cocher Améliorer l affichage avec buttonset () Exemples d utilisation des boutons Afficher des icônes dans les boutons Créer une calculatrice Programme de base Améliorer le programme Gérer les clics sur les boutons radio CHAPITRE 18 Barres de progression Principe de base Mise en forme du contenu La méthode progressbar () progressbar (options)

19 XXII jquery 1.7 & jquery UI progressbar ("action", params) Gestion des événements dans les barres de progression avec bind () Exemples d utilisation des barres de progression Incrémenter de façon régulière une barre de progression Effectuer un traitement à différentes étapes du remplissage CHAPITRE 19 Sliders Principe de base Mise en forme du contenu La méthode slider () slider (options) Options gérant l aspect et le comportement des sliders Options gérant les valeurs des curseurs Options gérant les événements sur le slider slider ("action", params) Gestion des événements sur les sliders avec bind () Exemples d utilisation des sliders Afficher la valeur d un ou plusieurs curseurs Régler l opacité d une image à l aide d un slider CHAPITRE 20 Calendriers Principe de base Mise en forme du contenu La méthode datepicker () datepicker (options) Options gérant l apparence et les effets visuels liés au calendrier Options d internationalisation Options gérant la sélection d une date dans le calendrier Options gérant les événements sur le calendrier datepicker ("action", params) Exemples d utilisation des calendriers Afficher plusieurs mois dans le calendrier Afficher un calendrier statique Indiquer des dates minimale et maximale Interdire la sélection de certaines dates Présélectionner une date Effectuer une requête Ajax lors de la sélection d une date

20 Table des matières XXIII CHAPITRE 21 Autocomplétion Principe de base Mise en forme du contenu La méthode autocomplete () autocomplete (options) Options gérant les listes de suggestions Options gérant les événements dans la liste de suggestions autocomplete ("action", params) Gestion des événements sur les listes de suggestions avec bind () Exemples d utilisation du mécanisme d autocomplétion Spécifier la largeur de la liste de suggestions Afficher une liste de suggestions dès l ouverture de la page HTML Afficher une liste de suggestions dès l entrée du curseur dans le champ de saisie Produire un effet lors de l apparition de la liste de suggestions Créer dynamiquement la liste de suggestions Créer dynamiquement la liste de suggestions en tenant compte de la saisie effectuée Appel Ajax pour un serveur PHP Appel Ajax pour un serveur Ruby on Rails Insérer des images dans la liste de suggestions Pour un serveur PHP Pour un serveur Ruby on Rails CHAPITRE 22 Glisser-déposer (drag & drop) La méthode draggable () draggable (options) Options spécifiant les éléments déplaçables Options gérant les éléments déplaçables Options gérant l effet à la fin du déplacement Options gérant les contraintes de déplacement Options gérant le défilement de la fenêtre lors du déplacement Options gérant les événements sur les éléments déplaçables draggable ("action", params) Gestion des événements sur les éléments déplacés avec bind () Exemples d utilisation de la fonctionnalité de drag (glisser) Effectuer un traitement lors du déplacement Imposer des limites au déplacement

21 XXIV jquery 1.7 & jquery UI Contraindre le déplacement à un espace donné Contraindre le déplacement à l horizontale ou à la verticale Déplacer un objet en le dupliquant La méthode droppable () droppable (options) Options gérant le comportement des éléments de dépôt Options indiquant quels éléments peuvent être déposés Options gérant l apparence des éléments de dépôt Options gérant les événements sur les éléments de dépôt droppable ("action", params) Gestion des événements sur les éléments de dépôt avec bind () Exemples d utilisation de la fonctionnalité de drop (déposer) : un panier d achats Créer un panier d achats avec glisser-déposer Ajouter un comportement au panier lors du dépôt Retirer un élément du panier CHAPITRE 23 Sélection multiple Principe de base Mise en forme du contenu La méthode selectable () selectable (options) Options gérant les éléments sélectionnés Options gérant les événements sur les éléments sélectionnés selectable ("action", params) Gestion des événements lors de la sélection avec bind () Exemples d utilisation du mécanisme de sélection Afficher l ordre d apparition des événements lors de la sélection Empêcher la sélection d un élément Inhiber le clic sur un élément pour le sélectionner Gérer un panier d achats CHAPITRE 24 Permutation d éléments dans la page Principe de base Mise en forme du contenu La méthode sortable () sortable (options) Options spécifiant et gérant les éléments déplaçables

22 Table des matières XXV Options spécifiant et gérant les éléments permutables Options gérant la place laissée vide par l élément déplacé Options gérant l effet à la fin du déplacement Options gérant les contraintes de déplacement Options gérant le défilement de la fenêtre lors du déplacement Options gérant les événements sur les éléments permutables sortable ("action", params) Gestion des événements lors de la permutation avec bind () Exemples d utilisation du mécanisme de permutation Afficher l ordre d apparition des événements Lors de la permutation dans une seule liste Lors de la permutation entre deux listes Déposer dans la liste un élément quelconque Insérer des images dans une liste de titres Ajouter un traitement visuel CHAPITRE 25 Redimensionnement Principe de base Mise en forme du contenu La méthode resizable () resizable (options) Options gérant les éléments redimensionnables Options gérant l effet lors du redimensionnement Options gérant les événements sur l élément redimensionné resizable ("action", params) Gestion des événements lors du redimensionnement avec bind () Exemples d utilisation du mécanisme de redimensionnement Afficher les dimensions de l élément lors du redimensionnement Afficher la position de l élément lors du redimensionnement Effectuer une animation lors du redimensionnement Créer un champ de saisie redimensionnable Saisie sur une seule ligne Saisie multiligne CHAPITRE 26 Effets visuels dans jquery UI De nouveaux effets avec la méthode effect (effectname, options, duration, callback) Effet blind

23 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 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.

24 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 $.

25 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.

26 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.

27 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 ()

28 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 ()).

29 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!

30 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 ().

31 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.

32 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.

33 Objets Deferred CHAPITRE 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

34 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

35 Objets Deferred CHAPITRE // 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.

36 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).

37 Objets Deferred CHAPITRE 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.

38 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>

39 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 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

40 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 custom.min.js></script> <link rel=stylesheet type=text/css href=jqueryui/css/smoothness/jquery-ui 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.

41 Onglets CHAPITRE 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 À 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>.

42 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 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>

43 Onglets CHAPITRE <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);

44 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.

45 Onglets CHAPITRE 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.

46 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")).

47 Onglets CHAPITRE 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 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.

48 XXVI jquery 1.7 & jquery UI Effet bounce Effet shake Effet clip Effet drop Effet explode Effet fold Effet highlight Effet puff Effet pulsate Effet scale Effet size Effet slide Les méthodes show (), hide () et toggle () La méthode animate () améliorée par jquery UI Propriétés CSS gérant les couleurs Nouvelles valeurs du paramètre easing Produire des effets avec les classes CSS Les méthodes addclass (), removeclass () et toggleclass () améliorées La méthode switchclass () Exemple d utilisation de toggleclass () Index

Montrer encore