Navigation Javascript par onglets

Pour partager cette vidéo sur les réseaux sociaux ou sur un site, voici son url :


Sujets que vous pourriez aussi aimer :


Navigation par onglets

C'est à l'occasion de cette nouvelle astuce Javascript que nous allons apprendre à donner vie à un système de navigation par onglets. Son rôle est d'offrir de riches informations sur une même page Web sans la surcharger. L'objectif est d'afficher ces informations seulement sur demande, soit au clic de l'utilisateur, précisément sur l'onglet choisi.



Dans l'exemple illustré par la capture, lorsque l'utilisateur clique sur un onglet, l'article attenant s'affiche aussitôt en lieu et place du précédent. L'aspect de ces onglets change au survol. De plus, ils se parent d'une couleur différente lorsqu'ils restent actifs. Ce mécanisme offre une qualité de consultation par thème plutôt intéressante.

Sources et présentation
Pour la mise en place de cette technique Javascript, nous proposons d'appuyer l'étude sur des sources offrant une page Web embarquant ces onglets déjà structurés par les styles Css. L'objectif est comme nous l'avons annoncé, de les articuler par le code Javascript.

• Télécharger le fichier compressé rubriques-onglets-javascript.rar en cliquant sur ce lien,
• Puis, le décompresser dans le dossier de votre choix,

La décompression livre le fichier de la page Web (index.htm) accompagné de ses ressources dans les sous dossiers dont les feuilles de styles dans le sous dossier Css.

• Double cliquer sur le fichier index.html pour l'afficher dans le navigateur Web par défaut,

Comme nous l'avons avancé, les onglets structurés existent bel et bien. Ils réagissent d'ailleurs au survol de la souris grâce à un style Css. En revanche à ce stade, au clic de la souris sur l'un d'entre eux, rien ne se produit encore.

• A la racine du dossier de décompression, cliquer droit sur le fichier index.htm,
• Dans le menu contextuel, choisir de l'ouvrir avec un éditeur comme le Notepad ++,

Nous accédons ainsi à la structure Html de la page Web. Deux feuilles de styles sont présentes en entête de code dans la section head :

...
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/mes-styles.css">
<link rel="stylesheet" href="css/les-styles.css">
<style>
...

La première mes-styles.css se charge de l'organisation globale de la page Web. La seconde gère l'agencement des éléments du système de navigation. Nous aurons l'occasion d'en découvrir quelques attributs.

La construction du système de navigation à onglets est située plus bas dans le code Html. Elle intervient dans le calque d'identifiant auCentre.

...
<div id="auCentre">
<div class="barre">
<button class="onglet actif" onclick="ouvrirOnglet(event,'Css')">Css</button>
<button class="onglet" onclick="ouvrirOnglet(event,'Javascript')">Javascript</button>
<button class="onglet" onclick="ouvrirOnglet(event,'Php')">Php</button>
</div>

<div id="Css" class="rubrique"><!--On garde rubrique pour reconnaître par code Javascript-->
<h1>Les styles Css</h1>
<p>Les <strong>CSS</strong> sont des feuilles de styles en cascade... ...En savoir plus sur les styles Css</u></a>
</p>
</div>

<div id="Javascript" class="rubrique" style="display:none">
<h1>Le code Javascript</h1>
<p>Le <strong>code Javascript</strong> est ce que l'on appelle un <strong>code client</strong>...
En savoir plus sur le code Javascript</u></a>
</p>
</div>

<div id="Php" class="rubrique" style="display:none">
<h1>Le code Php</h1>
<p>Le <strong>code PHP</strong> s'exécute quant à lui sur le<strong>serveur</strong>...
En savoir plus sur le code Php</u></a>
</p>
</div>
</div>
...

Les premiers éléments à considérer sont les styles Css affectés aux objets Html. Chaque onglet est représenté par un bouton (balise button) associé au style onglet. Vous pouvez consulter ce dernier en ouvrant la feuille de styles les-styles.css depuis le sous dossier Css.

...
.onglet
{
padding:8px 16px;
float:left;
width:auto;
border:none;
display:block;
border:none;
vertical-align:middle;
color:inherit;
background-color:inherit;
text-align:center;
cursor:pointer;
}
...

Il réalise des réglages relativement conventionnels. Mais l'un d'entre eux est primordial. Il concerne la valeur left passée à l'attribut float. C'est ainsi que les boutons dont l'aspect est transformé par les styles, acceptent de se positionner les uns à côté des autres. Pour le premier de ces onglets, le style est doublé : onglet actif.

...
.actif
{
color:#edeeee;
background-color:#a13638;
}
...

C'est lui que nous devrons affecter par le code Javascript à l'onglet cliqué pour le faire ressortir dans des jeux de couleurs le mettant en évidence.

Vous remarquez aussi la présence du style dérivé onglet:hover. Son gestionnaire gère le passage de la souris au-dessus de chaque bouton, donc de chaque onglet.

...
.onglet:hover
{
color:#2b579a;
background-color:#edeeee;
}
...

Les contenus des onglets sont quant à eux inscrits dans des calques (balises div), placés les uns en dessous des autres. Ils sont tous associés au style rubrique qui réalise des réglages on ne peut plus classiques. Mais surtout, vous remarquez qu'un style supplémentaire est greffé à la volée dans le flux du code Html : style="display:none". Cela signifie que seul le contenu du premier onglet est visible au chargement de la page Web. C'est sur cette propriété que le code Javascript devra agir dynamiquement pour afficher le contenu correspondant à l'onglet cliqué. Lorsqu'un calque est invisible (display:none), ceux du dessous remontent à hauteur.

A ce titre, vous pouvez constater que chaque onglet appelle la fonction ouvrirOnglet au clic : onclick="ouvrirOnglet(event,'Css')". Deux paramètres lui sont passés. Le premier event est un objet Javascript qui correspond au contexte de l'objet cliqué. Ainsi transmis à la fonction, il va livrer des propriétés permettant de diriger l'objet appelant pour le mettre en valeur. Le second désigne l'identifiant du calque embarquant le contenu associé pour pouvoir l'afficher dans le même temps.

Cette fonction existe déjà en bas du code Html, dans la section de script. Mais bien entendu, elle est vide de code Javascript pour l'instant.

...
<script type="text/javascript" language="javascript">
function ouvrirOnglet(evt, nomRubrique)
{

}
</script>
...

Déclarer les variables
Pour faire interagir ces onglets avec l'internaute, nous avons besoin d'une variable (tableau) récoltant tous les onglets, d'une autre récoltant toutes les rubriques correspondantes et d'une dernière pour les parcourir tous. C'est ainsi et parexemple que nous serons en mesure de masquer toutes les rubriques pour à l'issue, ne garder active que celle associée à l'onglet cliqué. Le calque affiché remontera naturellement au niveau des calques masqués au-dessus de lui. Et c'est ainsi que le système de navigation prendra vie.

• Dans les bornes de la fonction, ajouter les déclarations et l'affectation suivantes :

function ouvrirOnglet(evt,nomRubrique)
{
var i, tab, onglets;
tab = document.getElementsByClassName("rubrique");
}

Nous déclarons donc trois variables. Les variables tab et onglets doivent représenter respectivement les calques des rubriques et les éléments Html des onglets. C'est ainsi que nous pourrons les parcourir dans une boucle. C'est la raison pour laquelle nous déclarons une variable de boucle (i) qui servira de compteur. C'est alors la méthode getElementsByClassName de l'objet Javascript document qui renvoie la collection des éléments Html en fonction du nom du style commun passé en paramètre. Désormais, la variable tab est un tableau de variables mémorisant tous les calques associés au style rubrique.

Parcourir et masquer les calques
Grâce à ce tableau, nous sommes en mesure de parcourir tous ces calques pour affecter leur attribut Css display afin de les masquer tous dans un premier temps.

• A la suite du code de la fonction, créer la boucle suivante :

...
for (i = 0; i < tab.length; i++)
{
tab[i].style.display = "none";
}
...

C'est la propriété length d'un tableau de variables qui renseigne sur le nombre d'éléments qu'il contient. Ici, il s'agit du nombre de calques à parcourir. Nous partons donc du premier (0) pour rejoindre le dernier (i < tab.length) grâce à l'incrémentation de la variable de boucle. Et pour chaque calque donc (tab[i]), nous atteignons l'attribut Css display par le biais de sa propriété style afin de le régler à none et ainsi afin de les masquer tour à tour.

Parcourir et désactiver les onglets
C'est la même technique que nous devons reproduire pour les onglets. Seul doit rester actif l'onglet de la rubrique cliquée. Nous devons donc les parcourir tous pour supprimer le potentiel style nommé actif dans un premier temps, avant de ne l'attribuer ensuite qu'au bouton concerné. Mais avant cela, nous devons récupérer tous ces éléments Html dans le tableau de variables déclaré à cet effet.

• A la suite du code de la fonction, ajouter les instructions Javascript suivantes :

...
onglets = document.getElementsByClassName("onglet");
for (i = 0; i < onglets.length; i++)
{
onglets[i].className = onglets[i].className.replace(" actif","");
}
...

Comme précédemment, c'est bien la méthode getElementsByClassName qui permet de récupérer la collection des onglets que nous stockons dans la variable onglets. Dès lors, nous les parcourons tous, là encore, selon la même méthode que précédemment. Puis, nous exploitons la méthode replace sur la propriété className de l'onglet en cours d'analyse pour supprimer le style actif précédé d'un espace. Pour cela, nous le remplaçons par une chaîne vide ("").

Activer l'onglet - Afficher la rubrique
Maintenant que tous les onglets sont désactivés et que toutes les rubriques sont masquées, nous pouvons activer l'onglet dont la trace est passée en premier argument de la fonction. De même, nous pouvons afficher la rubrique correspondante dont l'identifiant est passé en second paramètre de la fonction.

• A la suite du code de la fonction, ajouter les deux instructions Javascript suivantes :

...
document.getElementById(nomRubrique).style.display = "block";
evt.currentTarget.className += " actif";
...

Grâce à la méthode getElementById de l'objet Javascript document, nous pointons sur le calque à afficher, reconnu par son identifiant passé en argument de la fonction. C'est alors l'attribut Css display de sa propriété style que nous basculons sur la valeur block pour l'afficher dans le flux des éléments Html. Ensuite, c'est la propriété currentTarget de l'objet evt qui permet de pointer sur l'onglet qui appelle la fonction. Dès lors, grâce à sa propriété className, nous lui ajoutons (+=) le style actif pour le mettre en valeur.

• Enregistrer les modifications (CTRL + S) puis basculer sur le navigateur Web,
• Rafraîchir la page avec la touche F5 du clavier,
• Puis, tour à tour, cliquer sur les trois onglets du système de navigation,

Comme vous le constatez, en même temps que l'onglet cliqué devient actif, sa rubrique s'affiche en lieu et place des autres calques Html. Notre système de navigation par onglets est donc abouti, avec un code Javascript relativement simple :

function ouvrirOnglet(evt,nomRubrique)
{
var i, tab, onglets;
tab = document.getElementsByClassName("rubrique");

for (i = 0; i < tab.length; i++)
{
tab[i].style.display = "none";
}

onglets = document.getElementsByClassName("onglet");
for (i = 0; i < onglets.length; i++)
{
onglets[i].className = onglets[i].className.replace(" actif","");
}

document.getElementById(nomRubrique).style.display = "block";
evt.currentTarget.className += " actif";
}