Breadcrumbs
Accueil
Category Table 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
Mise à jour le Samedi, 03 Mai 2008 22:03 Écrit par Administrator Mercredi, 30 Avril 2008 18:29
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.
Ajouter cette page à votre réseau social favoris
Rétrolien(0)
Adresse URI pour un rétrolien sur cet articleCommentaires (1)
Flux RSS pour les commentaires
Ecrivez un commentaire
Navigation
Publicités
Nos services
Programmation Web
Que ce soit pour faire la conception d'un site Web ou pour la refonte d'un site existant, nous avons la solution.
La création et la conception Web sont au cœur de nos activités. Chaque concept et création sont différents, et chaque client est unique. Rien n’est laissé au hasard pour faire de votre création multimédia un outil unique de promotion.
Suite ...
Programmation Desktop
Quel que soit votre projet, nous pouvons le réaliser pour vous !
Grâce à notre expertise en programmation, nous sommes en mesure de concevoir une variété d’applications qui pourront vous permettre d’augmenter votre clientèle, de la fidéliser ou encore de réduire vos coûts d’opération ! Nos critères élevés de contrôle de qualité ainsi que la grande expertise de nos programmeurs et de nos chargés de projets contribuent au succès des mandats qui nous sont confiés.
Suite ...
Autres ...
Quel que soit vos projets ou vos idées, contactez nous!
Grâce à notre expérience et notre expertise en informatique, nous serons en mesure d'évaluer vos projets et nous pourrons trouver une solution à vos problèmes. Que ce soit de la programmation ou de la base de données ou bien tout autres problèmes informatiques, contactez nous, nous serons là pour vous.
Suite ...