Dans ce tutoriel, nous allons créer un système de tabulation très léger entièrement en javascipt pour remplace celui de JQuery UI.
Langage : Javascript
Niveau : Intermdiaire
Sources : https://www.pushaune.com/wp-content/uploads/2018/11/tabulation-jquery-pushaune.zip
Sommaire
La structure HTML
Nous allons commencer par créer la structure HTML de notre tabulation.
Pour cela, nous allons commencer par une div qui va englober notre tabulation appelée push_tabulation :
<div class="push_tabulation">
</div><!-- .push_tabulation -->
Les éléments de navigations seront dans une liste non ordonnée. Chaque item aura une classe unique .item-X et une classe commune .button :
<div class="push_tabulation">
<ul>
<li class="item-1 button">
Lorem
</li>
<li class="item-2 button">
Ipsum
</li>
<li class="item-3 button">
Dolores
</li>
</ul>
</div><!-- .push_tabulation -->
Enfin, les éléments de contenu seront dans des div avec une classe unique item-1 et une classe commune tab-container.
<div class="push_tabulation">
<ul>
<li class="item-1 button">
Lorem
</li>
<li class="item-2 button">
Ipsum
</li>
<li class="item-3 button">
Dolores
</li>
</ul>
<div class="item-1 tab-container">
Ultima Syriarum est Palaestina per intervalla magna protenta, cultis abundans.
</div><!-- .item-1 tab-container -->
<div class="item-2 tab-container">
Terris et nitidis et civitates habens quasdam egregias.
</div><!-- .item-2 tab-container -->
<div class="item-3 tab-container">
Octaviani principis exaedificavit Herodes, et Eleutheropolim et Neapolim itidemque.
</div><!-- .item-3 tab-container -->
</div><!-- .push_tabulation -->
Notez que les premières classes des items de navigation et des éléments de contenu sont les mêmes.
elles vont nous servir de repère pour les lier au clic.
Le style CSS
Nous allons maintenant ajouter du style CSS pour rendre notre tabulation fonctionnelle.
Je ne traiterais ici que du style fonctionnel, et non pas cosmétique.
Pour rendre votre tabulation attrayante, attendez la fin de l’article.
Nous allons :
- Ajouter un curseur au survol de la navigation,
- masquer les tab-container par défaut.
- Ajouter une class.show aux .button et .tab-container actifs
/* Ajout du curseur sur les éléments de la navigation */
.push_tabulation .button{
cursor: pointer;
}
/* Retrait du curseur sur l'éléméent de navigation actif */
.push_tabulation .button.show{
cursor: default;
}
/* Les éléments de contenu sont masqué par défaut */
.push_tabulation .tab-container{
display: none;
}
/* L'élément de contenu qui a la classe .show apparaît */
.push_tabulation .tab-container.show{
display: block;
}
Initialisation de la tabulation
Nous allons commencer par ajouter la classe .show aux premiers éléments de navigation et de contenu pour ne pas avoir une tabulation vide :
$(function() {
/* Initialisation de la tabulation // État actif du premier item */
$('.push_tabulation .button.item-1').addClass('show');
$('.push_tabulation .tab-container.item-1').addClass('show');
});
Changement des états de navigation au clic
Ensuite, nous allons changer détecter le clic sur un button pour :
- changer ajouter la classe .show à l’élément cliqué,
- retirer la classe .show aux autres éléments.
/* Tabulation au click */
$('.push_tabulation li').click(function(){
/* On désactive l'état actif des autres boutons */
$('.push_tabulation li').not(this).each(function(){
$(this).removeClass('show');
});
/* On active l'état actif du bouton cliqué */
$(this).addClass('show');
});
Changement des états du contenu de la tabulation
Seconde étape, nous allons faire de même pour le contenu de notre tabulation.
Grace à la classe commune entre le .button et .tab-container, nous allons pouvoir les cibler :
/* On récupère en variable la première classe */
var myClassin = $(this).attr("class").split(' ')[0];
/* Grace à la .class, on désactive l'état actif des autres containers */
$('.push_tabulation .tab-container').not('.'+myClassin).each(function(){
$(this).removeClass('show');
});
/* Et on active l'état actif du bon container */
$('.'+myClassin).addClass('show');
Voilà le code complet :
$(function() {
/* Initialisation de la tabulation // État actif du premier item */
$('.push_tabulation .button.item-1').addClass('show');
$('.push_tabulation .tab-container.item-1').addClass('show');
/* Tabulation au click */
$('.push_tabulation li').click(function(){
/* On désactive l'état actif des autres boutons */
$('.push_tabulation li').not(this).each(function(){
$(this).removeClass('show');
});
/* On active l'état actif du bouton cliqué */
$(this).addClass('show');
/* On récupère en variable la première classe */
var myClassin = $(this).attr("class").split(' ')[0];
/* Grace à la .class, on désactive l'état actif des autres containers */
$('.push_tabulation .tab-container').not('.'+myClassin).each(function(){
$(this).removeClass('show');
});
/* Et on active l'état actif du bon container */
$('.'+myClassin).addClass('show');
return false;
});
});
Aller plus loin : avoir plusieurs tabulations sur une même page
Même si ce code est fonctionnel, il pose un problème.
Si nous mettons plusieurs systèmes de tabulation différents dans une même page, le clic que un bouton activera tous les .tab-container de la page.
Pour éviter ça, nous allons cibler les .tab-container qui sont dans le même .push-tabulation en utilisant .parent() et .siblings() :
$('.push_tabulation .button').click(function(){
/* On récupère en variable la première classe */
var myClassin = $(this).attr("class").split(' ')[0];
/* On désactive l'état actif des autres boutons */
$(this).siblings().not('.'+myClassin).each(function(){
$(this).removeClass('show');
});
/* On active l'état actif du bouton cliqué */
$(this).addClass('show');
/* Grace à la .class, on désactive l'état actif des autres containers */
$(this).parent().siblings('.tab-container').not('.'+myClassin).each(function(){
$(this).removeClass('show');
});
/* Et on active l'état actif du bon container */
$(this).parent().siblings('.tab-container.'+myClassin).each(function(){
$(this).addClass('show');
});
return false;
});
Multiple instances dans un même page
Maintenant, chaque module de tabulation est indépendant :)
Aller plus loin : styliser notre tabulation
Il ne vous reste plus qu’à styliser votre tabulation.
Voilà un exemple de css assez basique mais qui fonctionne :
.push_tabulation{
max-width: 750px;
margin: 30px auto 0;
}
.push_tabulation > ul{
display: flex;
border-bottom: 4px solid #eee;
margin-bottom: 20px;
}
.push_tabulation .button{
padding: 5px 0;
margin-right: 10px;
text-transform: uppercase;
line-height: 1em;
font-size: 0.8rem;
font-weight: 700;
background: #fff;
cursor: pointer;
position: relative;
}
.push_tabulation .button:after{
content: "";
display: block;
position: absolute;
z-index: 1;
bottom: 0;
left: 0;
height: 4px;
width: 100%;
transform: translateY(4px);
background: transparent;
}
.push_tabulation .button:hover:after{
background: #777;
}
.push_tabulation .button.show:hover:after,
.push_tabulation .button.show:after{
background: #0c798e;
}
Le résultat en image :
Voilà, une archive avec tout le code que nous venons de voir ensemble.