Tutoriel jQuery : créer une boîte d’onglets
Très populaire, le jQuery est utilisé par de nombreux développeurs pour la mise en place de leurs projets web. Et pour cause puisque cette bibliothèque Javascript facilite grandement les choses et permet de déployer facilement des effets saisissants. Une bonne manière d’améliorer l’interaction homme / machine et de donner un coup de fouet à l’expérience utilisateur proposée. Pour ce premier tutoriel sur le sujet, nous allons apprendre à réaliser facilement une boîte d’onglets du même genre que celles utilisées dans la barre latérale de Weedle.
jQuery, présentation de la bibliothèque
Avant de vous présenter jQuery et de vous parler de son histoire, il est préférable de commencer par le début et de vous expliquer ce qu’est une bibliothèque. Il s’agit d’un ensemble d’outils et d’instructions permettant le développement rapide d’applications. Constituée de différentes « briques », elle propose ainsi de nombreuses fonctions destinées à faciliter le travail du développeur. Un bon moyen de ne pas perdre son temps en tout codant de zéro.
Le jQuery est donc une bibliothèque Javascript, ce qui signifie qu’elle est entièrement dédiée à ce langage et qu’elle a pour objectif de simplifier l’utilisation de certaines commandes. En effet, l’avènement du Web 2.0 a donné lieu à une véritable révolution en matière de développement web. Les sites ne se contentent ainsi plus de présenter de l’information, ils se doivent en effet de proposer une interface riche et une expérience utilisateur améliorée. C’est ainsi que l’on a vu apparaître de véritables webwares (ou applications web) finalement très proches des fonctions proposées par un logiciel traditionnel.
Pour en finir avec cette courte présentation, on ajoutera simplement que jQuery a vu le jour en 2006.
jQuery, l’installation
Bien que le terme soit assez mal choisi (on installe un programme, pas une bibliothèque), le fait est que nous allons devoir commencer par intégrer jQuery à notre site pour pouvoir profiter de toutes ses possibilités. La procédure à suivre est relativement simple. Pour commencer, il est nécessaire de se rendre sur le site officiel, http://www.jquery.com, et de télécharger notre bibliothèque, soit en version complète, soit en version compressée. Précisons juste que la différence entre ces deux versions est assez simple : la version compressée, légère mais illisible, convient aux sites en production alors que la version complète, plus lourde mais plus claire, vous permettra de mieux comprendre comment les choses se passent.
Une fois le fichier téléchargé, nous allons devoir le lier à notre site. Pour se faire, dans le code source de votre site, entre les balise <head> et </head>, nous allons simplement ajouter la ligne suivante :
1 | <script src="VOTRE_FICHIER.js" type="text/javascript" /> |
Précisons que tous vos scripts Javascript devront nécessairement se situer après cette ligne. Sans cela, ils ne seront pas correctement interprétés. De la même manière, assurez-vous que le chemin indiqué est correct.
Tutoriel jQuery : écrire le squelette de notre boîte d’onglets
La première étape de notre tutoriel est relativement simple puisque nous allons devoir commencer par créer le squelette de notre boîte d’onglets et donc définir sa structure HTML ainsi que ses CSS. Pour se faire, vous aurez besoin d’un minimum de connaissances en la matière.
Etape 1 : la structure HTML
Notre boîte d’onglets sera constituée de plusieurs éléments. Nous aurons tout d’abord une liste horizontale comprenant nos trois onglets dotés d’un ID unique. En dessous, nous aurons trois DIV portant chacun un ID unique aussi. Globalement, votre code devrait ressembler à ça :
1 2 3 4 5 6 7 8 | <ul id="cap_nav"> <li id="tab_1" class="cap_onglet cap_active" title="content_1">Onglet 1</li> <li id="tab_2" class="cap_onglet" title="content_2">Onglet 2</li> <li id="tab_3" class="cap_onglet" title="content_3">Onglet 3</li> </ul> <div id="content_1" class="cap_content">Content 1</div> <div id="content_2" class="cap_content">Content 2</div> <div id="content_3" class="cap_content">Content 3</div> |
Dans un premier temps, je vous recommande de ne pas faire de fioritures. Une fois que vous aurez vérifié le bon fonctionnement de votre boîte à onglets, vous pourrez commencer à les personnaliser. Avoir une structure simplifiée et épurée vous permettra de résoudre plus facilement les éventuels bogues que vous pourriez rencontrer.
Précisons également que tous nos onglets portent la classe « cap_onglet » mais que nous avons ajouté la classe « cap_active » au premier pour qu’il soit affiché par défaut.
Etape 2 : les CSS
Là encore, afin de conserver une certaine lisibilité (et donc vous faciliter les choses), le morceau de code qui suit ne comporte aucune fioriture, uniquement les propriétés indispensables pour que notre boîte d’onglets puisse fonctionner dans de bonnes conditions.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | .cap_onglet, .cap_active { cursor : pointer; display : block; float : left; } .cap_onglet { color:#863486; } .cap_active { color : #fff; } div#content_2, div#content_3 { display :none; } |
Plusieurs choses à signaler ici. En premier lieu, on va utiliser deux classes pour les onglets : la classe ».cap_onglet » et la classe « .cap_active ». Ainsi, nous pourrons modifier l’apparence de l’onglet actif (sur Weedle, ce dernier est noir). Même chose, nous ajoutons la propriété « cursor:pointer » dans un souci d’accessibilité : en passant leur curseur sur nos onglets, les internautes verront qu’ils peuvent cliquer dessus.
Enfin, par défaut, nos DIV « content_2″ et « content_3″ sont masqués. Ce n’est pas le cas de « content_1″ car il est affiché par défaut.
Tutoriel jQuery : écrire le script qui animera l’ensemble
En l’état, notre boîte d’onglets est complètement figée. Si nous cliquons sur l’un de ces derniers, rien ne se passe. C’est normal, car il manque encore une dernière étape, la plus complexe pour les néophytes : le script. Il faudra bien entendu le copier entre les balise <head> et </head>, juste après la ligne qui appelle le fichier jQuery.
Afin de le rendre plus clair pour vous, je l’ai commenté et nous allons ensuite l’expliquer en détails.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 | <script text="text/javascript"> $(document).ready( function() { // Lorsqu'on clique sur un onglet $("li.cap_onglet").click( function () { // On les met tous en inactif $(".cap_active").removeClass("cap_active"); // On met l'onglet cliqué en actif $(this).addClass("cap_active"); // On cache toutes les boîtes de contenu $(".cap_content").slideUp(); // On affiche la boîte de contenu liée à notre onglet var contenu_aff = $(this).attr("title"); $("#" + contenu_aff).slideDown(); }); </script> |
Dans un premier temps, on attend la fin du chargement de la page (ce qui correspond à la première ligne de notre script). Ensuite, on appelle tous les onglets possédant la classe « cap_onglet ». Les lignes qui suivent ne concerneront que ces derniers.
On commence par retirer la classe « cap_active » à tous les onglets, puis on l’ajoute à celui sur lequel on vient de cliquer afin de changer son apparence. On enchaine ensuite en cachant toutes les boîtes de contenu (c’est le fameux « slideUp ») et on termine en déroulant uniquement la boîte liée à l’onglet sur lequel on vient de cliquer (le « slideDown »).
Petite précision à ce sujet. Pour trouver la boîte de contenu liée à l’onglet cliqué, on passe par le contenu de la balise « title » de ce dernier. Si vous regardez attentivement notre structure HTML, vous pourrez remarquer que tous les onglets possèdent un « title » unique qui n’est autre que l’ID du DIV rattaché.
Et pour aller plus loin
En l’état, nos onglets fonctionnent parfaitement mais il reste encore beaucoup de choses à faire, notamment au niveau des CSS de chaque élément. J’aurais pu y consacrer une rubrique dans cet article mais j’ai préféré me concentrer sur l’essentiel et ce sera donc à vous de compléter ce point.
En revanche, jQuery propose de nombreux autres effets que le « slideUp » ou le « slideDown ». Si ces derniers ne vous conviennent pas, ou si vous souhaitez en expérimenter d’autres, il suffit de vous reporter à la liste du site officiel. Au passage, vous trouverez également à cette adresse une documentation complète pour aller un peu plus loin.
Bien évidemment, je ne manquerai pas de vous proposer d’autres tutoriels sur le sujet dans les semaines qui viennent. En tout cas, j’espère que celui-ci vous aidera à mieux comprendre le fonctionnement de la bibliothèque.
#1
Salut,
Bravo pour ce tuto, il est excellent.
Hervé
#2
@deherve: J’espère que ça te sera utile en tout cas
#3
salut^^
C’est vrai qu’il est génial.
ça m’a l’air trop compliqué pour moi, mais bon…
Il en faut pour tous, hein…
#4
@zefulon: En réalité, c’est beaucoup moins compliqué que ça en a l’air, il faut juste prendre le temps de bien comprendre comment fonctionne la partie jQuery. Pour le HTML et les CSS, là, si tu maîtrises un minimum, cela ne pose pas de problème. Pour le script, disons que le jQuery a l’avantage d’être quand même très clair et très cohérent.
#5
Wep ça ressemble à ce que j’avais avec mootools il y a de ça quelques années. Cependant ça m’a l’air un peu plus short niveau code. Très sympa cet effet et léger et bonus il ne gène pas l’accessibilité
Faut que je me remette au Js moi ^^
>> Comment tu as fais pour afficher de cette façon le code source ? C’est un plugin ?
#6
@dhoko: Ouais, j’avais aussi testé Mootools mais j’ai un petit coup de coeur pour jQuery donc bon… Sinon, j’utilise effectivement un plugin pour afficher le code : WP-Syntax.
#7
Super guide étape par étape qui rend jQuery accessible. Depuis le temps que je met en favoris des articles comme celui-là faudrait vraiment que je passe à l’action
#8
@Vincent: Faut juste se motiver et après ça vient tout seul. Pis y en aura d’autres des articles comme ça
#9
Bonjour,
Comment on télécharge ce genre de fichier? d’habitude ca se télécharge avec une fenêtre qui s’ ouvre demandant de télécharger et ca attéri sur le bureau, mais là..?
#10
Je suis novice désolé..et ca manque de détail..
j’ ai compris comment enregistrer ce fichier(quand même)..mais quoi faire de lui. une foi copier le bout de code entre head et head(), je ne suis plus. Que faut il faire du fichier télécharger sur le bureau puisq’ il n’est pas dit où..faut’ il remplacer le VOTRE_FICHIER.js par le fichier téléchargé? Faut il mettre ce fichier via ftp dans la racine du site? Les bout de code que vous montrez, La structure HTML,les CSS, faut’ il les copiers collez quelque part ou faut ‘ il les retrouvé? Je suis vraiment désolé mais je galère depuis trop longtemp à mettre une boite a onglet dans mon site..je tient vraiment à y arriver..merci d’ avance pour votre aide tres en détail.lol
#11
@Gwen: Houla, si tu ne maitrises pas le HTML et les CSS, mieux faut ne pas te lancer dans le jQuery… Il faudrait effectivement que je fasse des articles de base, j’y penserai
#12
Merki! Un tutoriel vidéo serait parfais..
#13
@gwen: C’est quand même plus clair par écrit, non ? Pas besoin de stopper la vidéo pour coder comme ça
#14
tutoriel génial, désolé utilisé sur plusieurs de mes sites, un grand bravo à toi Fred.
Vive le partage des sources
#15
tutoriel génial, déjà utilisé sur plusieurs de mes sites, un grand bravo à toi Fred.
Vive le partage des sources
#16
@Max: De rien
#17
Intéressant, juste l’oublie de fermer la fonction
}); pour que le script marche !
#18
Salut et d’abord merci pour ce tuto
j’y ai vu 2 erreurs qui m’ont empêché de le faire tourner sur FF.
tout d’abord :
j’ai du remplacer par
sans ça, ça ne fonctionne pas.
Ensuite comme l’a dit Diana, il faut refermer la fonction « inline » javascript.
Mais sinon c’est super utile pour commencer
Merci beaucoup !
Throdo
#19
ah si j’en ai oublié un 3ème
changer
par
voilà je crois que c’est tout !
merci encore, ça m’a donné envie d’aller plus loin avec jquery, j’adore le slideup !!!
Throdo
#20
@Diana: Ah, merci de l’info
@Throdo: Les balise HTML et le Javascript sont pas interprétées, je ne vois pas ton code dans tes commentaires, faudrait que tu l’écrives autrement pour que je puisse le voir.
#21
Merci pour ce tuto. Ce code sera utile