Category Table 
Créer une boîte d'onglet à la mode web 2.0 avec CSS et jQuery - Partie 2
Créer une boîte d'onglet à la mode web 2.0 avec CSS et jQuery - Partie 2
Example of Category Table layout (FAQs/Languages category)
Créer une boîte d'onglet à la mode web 2.0 avec CSS et jQuery - Partie 2
Administrateur
Avr 30
|18:29
Mise à jour le Samedi, 03 Mai 2008 22:03
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.
Traduit et inspiré de : Source
.png)
Utilisation de DOM
Les éléments que nous recherchons se nomment :- <a href="/" id="tab_1" class="active">
- <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';
}
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="/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>
<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>
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';
}
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="/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>
<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'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="/scripts/jquery-1.2.3.min.js">
<script>
$(document).ready(function(){
$("a").slideUp();
});
</script>
<script>
$(document).ready(function(){
$("a").slideUp();
});
</script>
Utilisons maintenant cette astuce avec nos onglets
<script src="/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>
<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="#" 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>
<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>
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.
Envoyer par mail
Vu: 6819
Commentaires (2)
Flux RSS pour les commentaires
Comment faire fonctionner ce script aveec d'autres onglets ajoutés?
Par Maklen , août 05, 2010
Par Maklen , août 05, 2010
Je souhaiterai savoir Comment faire fonctionner ce script aveec d'autres onglets ajoutés?
Quelle partie du code modifié?
Merci
Quelle partie du code modifié?
Merci
Ecrivez un commentaire
