Éric Sarrion JQuery & JQuery UI Groupe Eyrolles, 2011, ISBN : 978-2-212-12892-5
11 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 11-1. Nous avons une barre d onglets (contenant ici trois onglets), puis un contenu différent pour chacun des onglets. Figure 11 1 Onglets dans une page HTML
254 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.4.custom.min.js></script> <link rel=stylesheet type=text/css href=jqueryui/css/smoothness/jquery-ui-1.8.4.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 11-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 11 2 Les onglets ne s affichent pas dans la page HTML.
Onglets CHAPITRE 11 255 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 11-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 11-3 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>.
256 jquery UI : pour des fonctionnalités graphiques avancées DEUXIÈME PARTIE Figure 11 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.4.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 11 257 <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 11-4, l apparence des onglets et de leur contenu a été modifiée en fonction du nouveau style. Figure 11 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);
258 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 11 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 11 259 Tableau 11 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 11 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.
260 jquery UI : pour des fonctionnalités graphiques avancées DEUXIÈME PARTIE Méthode 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) tabs ("select", index) tabs ("url", index, url) tabs ("load", index) tabs ("rotate", duration, repeat) tabs ("destroy") tabs ("length") Tableau 11 3 Actions possibles grâce à la méthode tabs ("action", params) (suite) Action Rendre actif l onglet dont l index est indiqué. Sélectionner l onglet dont l index est indiqué : son contenu devient alors visible. 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 11 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 11 261 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.4.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.
262 jquery UI : pour des fonctionnalités graphiques avancées DEUXIÈME PARTIE L onglet est créé par jquery UI, ainsi que le <div> correspondant à son contenu. Ce contenu étant vide, on y ajoute la dernière instruction appendto () afin d y inscrire le contenu. Le résultat est présenté sur la figure 11-5. Figure 11 5 Le quatrième onglet a été créé dynamiquement. Modifier le contenu d un onglet au moyen d Ajax Exemple 1 : appel au serveur avec "url" et "load" Nous souhaitons initialiser le contenu d un onglet à partir du code HTML retourné par le serveur. Nous utiliserons ici un serveur PHP comme celui que nous avons utilisé dans le chapitre 7 sur Ajax. Nous allons modifier le contenu du premier onglet, celui d index 0, au moyen des actions "url" et "load". Initialisation du contenu d un onglet par Ajax <script src=jquery.js></script> <script src=jqueryui/development-bundle/ui/jquery-ui-1.8.4.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>