Créer une boîte d'onglet à la mode web 2.0 avec CSS et jQuery - Partie 2

Maintenant que nous avons créé notre boîte d'onglets, nous allons maintenant lui donner un peu plus de fonctionnalité, car pour l'instant, seul l'onglet principal est affiché. Plusieurs solutions s'offrent à vous, nous allons les voir ici.
 

Utilisation de DOM

Les éléments que nous recherchons se nomment :

1. <a href="http://www.pckult.net/" id="tab_1" class="active">
2. <div id="content_1" class="content">

   Maintenant en JavaScript, nous pouvons trouver un élément en utilisant sont identifiant seulement et la méthode : document.getElementById(). Alors, document.getElementByI('content_1') va nous retourner l'élément du 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 ça classe comme suit :
  document.getElementById('tab_1').className = 'active';
Voici donc le code simple et complet pour une implantation de base de votre gestionnaire d'onglet :
  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éclanchement de cette fonction sur le clic des onglets :
  <script src="http://www.pckult.net/functions.js" type="text/javascript"></script>  
<ul class="tabs">
   <li><a href="http://www.pckult.net/javascript:ChangeOnglet('tab_1', 'content_1');" id="tab_1" class="active">Astuces</a></li>
   <li><a href="http://www.pckult.net/javascript:ChangeOnglet('tab_2', 'content_2');" id="tab_2">Tutoriaux</a></li>
   <li><a href="http://www.pckult.net/javascript:ChangeOnglet('tab_3', 'content_3');" id="tab_3">Articles</a></li>
</ul>
Cliquer 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, peu importe 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 peut importe le nom et le nombre d'onglets de faire fonctionner votre gestionnaire d'onglet.

• Le premier argument « active » représente le numéro de l'onglet actif.
• Le second 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="http://www.pckult.net/functions.js" type="text/javascript"></script>  
<ul class="tabs">
   <li><a href="http://www.pckult.net/javascript:ChangeOnglet_2(1, 3, 'tab_', 'content_');" id="tab_1" class="active">Astuces</a></li>
   <li><a href="http://www.pckult.net/javascript:ChangeOnglet_2(2, 3, 'tab_', 'content_');" id="tab_2">Tutoriaux</a></li>
   <li><a href="http://www.pckult.net/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'onglet 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. Bien sûr il existe déjà une multitude de script ou de librairie qui fait office de gestionnaire d'onglet. Mais bref, il est utile de savoir le développer, soit même. Par contre, afin d'ajoute 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 faires disparaître, il suffit d'effectuer la fonction suivante :
  <script src="http://www.pckult.net/scripts/jquery-1.2.3.min.js">
<script>  
   $(document).ready(function(){
     
      $("a").slideUp();
       
   });
</script>
Utilisons maintenant cette astuce avec nos onglets
  <script src="http://www.pckult.net/scripts/jquery-1.2.3.min.js"></script>
<script>
  // Une fois le chargment de la page terminé ...
  $(document).ready(function(){  
   // Lorsqu'un lien a.tab est cliqué
   $("a.tab").click(function () {     
      // Mettre toutes les onglets non actif
      $(".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 associer, nous
      // avons modifier 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="http://www.pckult.net/#" title="content_1" class="tab active">Astuces</a></li>
   <li><a href="http://www.pckult.net/#" title="content_2" class="tab">Tutoriaux</a></li>
   <li><a href="http://www.pckult.net/#" title="content_3" class="tab">Articles</a></li>
</ul>
Cliquer sur le lien suivant afin de voir le résultat : Voir le 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.