Tutoriel jQuery : créer une boîte d’onglets

Très populaire, le est utilisé par de nombreux développeurs pour la mise en place de leurs projets web. Et pour cause puisque cette bibliothèque  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.

, présentation de la bibliothèque

Avant de vous présenter 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 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 est donc une bibliothèque , 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 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 a vu le jour en 2006.

, 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 à 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 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 : é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 : é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 .

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

Crédits Photo

Related Posts with Thumbnails

Publié le 16 janvier 2010
Auteur : Fred
Catégorie(s) : Design, Tutoriels
Tags : , , ,

12 commentaires


  1. #1
    webdeux, le 16 jan 2010 à 13 h 40 min

    Tutoriel jQuery : créer une boîte d’onglets http://lu.cx/YTZ0mB

    This comment was originally posted on Twitter

    RépondreRépondre

  2. #2
    geekbooster, le 16 jan 2010 à 14 h 03 min

    Tutoriel jQuery : créer une boîte d’onglets http://lu.cx/YTZ0lB

    This comment was originally posted on Twitter

    RépondreRépondre

  3. #3
    NewsGeeks, le 16 jan 2010 à 14 h 17 min

    News Geek : Tutoriel jQuery : créer une boîte d’onglets – Très populaire, le jQuery est utilisé par de nombreux dév… http://ow.ly/16lRXa

    This comment was originally posted on Twitter

    RépondreRépondre

  4. #4
    deherve, le 16 jan 2010 à 16 h 27 min

    Salut,

    Bravo pour ce tuto, il est excellent.

    Hervé

    RépondreRépondre

  5. #5
    Fred, le 16 jan 2010 à 17 h 22 min

    @deherve: J’espère que ça te sera utile en tout cas :)

    RépondreRépondre

  6. #6
    zefulon, le 17 jan 2010 à 12 h 09 min

    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…

    RépondreRépondre

  7. #7
    Fred, le 17 jan 2010 à 12 h 27 min

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

    :)

    RépondreRépondre

  8. #8
    dhoko, le 17 jan 2010 à 20 h 48 min

    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 ?

    RépondreRépondre

  9. #9
    paill, le 18 jan 2010 à 23 h 18 min

    Tutoriel jQuery : créer une boîte d’onglets | Weedle http://bit.ly/7r3r0G

    This comment was originally posted on Twitter

    RépondreRépondre

  10. #10
    Fred, le 20 jan 2010 à 9 h 46 min

    @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. :)

    RépondreRépondre

  11. #11
    Vincent, le 26 jan 2010 à 17 h 34 min

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

    RépondreRépondre

  12. #12
    Fred, le 27 jan 2010 à 0 h 23 min

    @Vincent: Faut juste se motiver et après ça vient tout seul. Pis y en aura d’autres des articles comme ça :)

    RépondreRépondre