Créer une boîte d'onglets à la mode Web 2.0 avec jQuery
Partie 2 : le code JavaScript

Date de publication : 13/11/2008 , Date de mise à jour : 21/12/2008

Par Dave Lizotte (PcKULT.NET)
 

Un des plus grands défis d'un concepteur Web est de trouver un moyen de placer beaucoup d'informations sans perdre de lisibilité. Les onglets sont un bon moyen de gérer ce type de problème. Depuis l'avènement du Web 2.0, on voit une quantité phénoménale de blogs utilisant cette technique. Nous allons donc voir comment créer une boîte d'onglets dynamique avec JavaScript et jQuery en partant d'une base HTML / CSS qui vous a déjà été présentée dans le précédant article : Créez une boîte d'onglets avec CSS et jQuery - Partie 1

               Version PDF (Miroir)   Version hors-ligne (Miroir)

Fichiers de base
Utilisation du DOM
Avec un peu plus de complexité
Utilisation de jQuery
Remerciements


Fichiers de base

Voici la base à partir de laquelle nous allons travailler :

Une boîte à onglets
Les codes HTML et CSS correspondants sont disponibles ici


Utilisation du DOM

Les éléments que nous recherchons se nomment :

  • <a href="/" id="tab_1" class="active">
  • <div id="content_1" class="content">
En JavaScript, nous pouvons trouver un élément en utilisant seulement son identifiant et la méthode : document.getElementById(). Ainsi, document.getElementById('content_1') va nous retourner l'élément correspondant au premier onglet. Il suffit alors de modifier le style pour mettre la valeur display:none à display:block : 

document.getElementById('content_1').style.display = 'none';
Afin de modifier l'onglet actif, il suffit de modifier le nom de sa classe comme suit : 

document.getElementById('tab_1').className = 'active';
Voici donc le code simple et complet pour une implémentation de base de votre gestionnaire d'onglets : 

function ChangeOnglet(onglet, contenu) 
{   
    document.getElementById('content_1').style.display = 'none';
    document.getElementById('content_2').style.display = 'none';
    document.getElementById('content_3').style.display = 'none';       
    document.getElementById(contenu).style.display = 'block';       

    document.getElementById('tab_1').className = '';
    document.getElementById('tab_2').className = '';
    document.getElementById('tab_3').className = '';       
    document.getElementById(onglet).className = 'active';       
}
Il suffit maintenant d'ajouter le déclenchement de cette fonction sur le clic des onglets : 

<script src="functions.js" type="text/javascript"></script>   
<ul class="tabs">
    <li><a href="javascript:ChangeOnglet('tab_1', 'content_1');" id="tab_1" class="active">Astuces</a></li>
    <li><a href="javascript:ChangeOnglet('tab_2', 'content_2');" id="tab_2">Tutoriaux</a></li>
    <li><a href="javascript:ChangeOnglet('tab_3', 'content_3');" id="tab_3">Articles</a></li>
</ul>
Cliquez sur le lien suivant afin de voir le résultat : Voir le résultat.


Avec un peu plus de complexité

Si vous ajoutez d'autres onglets, vous devrez modifier votre script, ce qui n'est pas très professionnel. Nous allons donc créer un script qui va fonctionner quel que soit le nombre d'onglets ainsi que leur identifiant. 

function ChangeOnglet_2(active, nombre, tab_prefix, contenu_prefix) 
{   
    for (var i=1; i < nombre + 1; i++) 
    {
        document.getElementById(contenu_prefix + i).style.display = 'none';
        document.getElementById(tab_prefix + i).className = '';
    }  
    
    document.getElementById(contenu_prefix+active).style.display = 'block';
    document.getElementById(tab_prefix+active).className = 'active';   
}
Notre seconde version demande quelques paramètres supplémentaires, mais cela est plus avantageux au final. Cela vous permet maintenant, peu importe le nom et le nombre d'onglets, de faire fonctionner votre gestionnaire d'onglets.

  • Le premier argument « active » représente le numéro de l'onglet actif.
  • Le deuxième argument « nombre » représente le nombre d'onglets de votre boîte.
  • Les 2 derniers arguments « tab_prefix » et « contenu_prefix » représentent le préfixe utilisé par les identifiants de vos onglets et de vos boîtes de contenu.
Voici maintenant comment appeler la fonction : 

<script src="functions.js" type="text/javascript"></script>   
<ul class="tabs">
    <li><a href="javascript:ChangeOnglet_2(1, 3, 'tab_', 'content_');" id="tab_1" class="active">Astuces</a></li>
    <li><a href="javascript:ChangeOnglet_2(2, 3, 'tab_', 'content_');" id="tab_2">Tutoriaux</a></li>
    <li><a href="javascript:ChangeOnglet_2(3, 3, 'tab_', 'content_');" id="tab_3">Articles</a></li>
</ul>
Cette fonction vous permet aussi de l'utiliser sur une autre boîte d'onglets en modifiant l'appellation de la fonction seulement. Je n'ai pas inséré d'exemple, car le rendu est le même que la première solution.


Utilisation de jQuery

Passons maintenant aux choses sérieuses afin d'obtenir un rendu Web 2.0 (affichage du contenu avec une animation). Bien sûr il existe déjà une multitude de scripts ou de librairies qui font office de gestionnaire d'onglets. Mais il est utile de savoir le développer soi même. Par contre, afin d'ajouter notre petite touche Web 2.0, nous allons utiliser la librairie jQuery.

Tout d'abord, commencer par télécharger la librairie jQuery : Télécharger.
jQuery offre beaucoup de fonctions permettant de sélectionner des éléments. Par exemple, si vous désirez sélectionner tous les éléments d'une page qui sont des liens <a> et les faire disparaître, il suffit d'effectuer la fonction suivante : 

<script type="text/javascript" src="/scripts/jquery-1.2.3.min.js">
<script type="text/javascript">   
    // Une fois le chargment de la page terminé ...
    $(document).ready(  function()
                        {
                            $("a").slideUp();
                        }
                    );
</script>
Utilisons maintenant cette astuce avec nos onglets : 

<script type="text/javascript" src="/scripts/jquery-1.2.3.min.js"></script>
<script type="text/javascript">
    // Une fois le chargment de la page terminé ...
    $(document).ready(  function()
                        {
                            // Lorsqu'un lien a.tab est cliqué
                            $("a.tab").click(   function () 
                                                {
                                                    // Mettre tous les onglets non actifs
                                                    $(".active").removeClass("active");
                                                    
                                                    // Mettre l'onglet cliqué actif
                                                    $(this).addClass("active");
                                                    
                                                    // Cacher les boîtes de contenu
                                                    $(".content").slideUp();
                                                    
                                                    // Pour afficher la boîte de contenu associé, nous
                                                    // avons modifié le titre du lien par le nom de
                                                    // l'identifiant de la boite de contenu
                                                    var contenu_aff = $(this).attr("title");
                                                    $("#" + contenu_aff).slideDown();
                                                }
                                              );
                        }
                    );
</script>
Pour ce qui est de la partie HTML, laissez-la comme suit : 

<ul class="tabs">
    <li><a href="#" title="content_1" class="tab active">Astuces</a></li>
    <li><a href="#" title="content_2" class="tab">Tutoriaux</a></li>
    <li><a href="#" title="content_3" class="tab">Articles</a></li>
</ul>
Cliquez sur le lien suivant afin de voir le résultat : résultat.
Voilà, c'est ce qui termine notre tutoriel sur les onglets. J'espère que le tout est clair pour vous. Si vous avez des questions, ne vous gênez pas, nous sommes là pour vous.


Remerciements

Tous mes remerciements à romaintaz pour sa relecture.



               Version PDF (Miroir)   Version hors-ligne (Miroir)

Valid XHTML 1.1!Valid CSS!

Copyright © 13/11/2008 Dave Lizotte. Aucune reproduction, même partielle, ne peut être faite de ce site et de l'ensemble de son contenu : textes, documents, images, etc. sans l'autorisation expresse de l'auteur. Sinon vous encourez selon la loi jusqu'à trois ans de prison et jusqu'à 300 000 € de dommages et intérêts. Cette page est déposée.

 
 
Developpez.com

Nous contacter

Participez

Informations légales

 
Services

Forum Développement Web

Blogs

Hébergement

 
Partenaires

Hébergement Web