Affichage en onglets avec jQuery jquery02

Cet exercice consiste à créer un système d’affichage sous la forme  d’onglets en utilisant le framework jQuery.

Aperçu du résultat final

Voir le code par Julien Crego (@crego) sur CodePen.

Consignes de l’exercice

Préparation de l’exercice

Créez un dossier racine qui contiendra tous vos fichiers de l’exercice.

Créez une nouvelle page HTML avec la structure suivante en prenant bien soin de l’enregistrer dans votre dossier racine.

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>Exo onglets avec jQuery</title>
    </head>
    <body>

    </body>
</html>

Créez une nouvelle feuille de styles dans votre dossier racine.

Intégrez la feuille de style que vous venez de créer dans l’en-tête de votre page html.

Préparation du contenu des onglets

HTML : Insérez trois éléments div avec pour chacun un des id suivants : onglet1, onglet2 et onglet3. Insérez du texte dans chacun des éléments div.

HTML : Ajoutez la classe CSS tab pour chacun des trois éléments div, puis ajoutez une deuxième classe tab-active au premier élément.

CSS : Utilisez le sélecteur CSS vous permettant de sélectionner les trois éléments de contenu et masquez-les avec la propriété CSS display. Profitez-en pour leur ajouter une bordure.

CSS : Utilisez le sélecteur CSS vous permettant de sélectionner uniquement le premier élément de contenu et affichez-le avec la propriété CSS display.

A cette étape de l’exercice, vous ne devriez avoir qu’un seul des éléments de visible.

Préparation des onglets

HTML : Au dessus des contenus, créez une liste non-numérotées contenant le texte des trois onglets.

HTML : Ajoutez des liens sur les textes des onglets avec href="#".

HTML : Ajoutez la classe CSS tab-nav-active au premier des 3 liens créés précédemment et l’id tab-nav à la liste.

HTML : Ajoutez l’attribut html data-tab aux trois liens avec comme valeur : onglet1, onglet2 et onglet3.

A ce point d’étape, votre page doit ressembler à l’image ci-dessous :

CSS : Utilisez le sélecteur #tab-nav li et la propriété display afin d’afficher le menu sous la forme suivante :

CSS : Utilisez le sélecteur #tab-nav pour supprimer les marges internes et les marges externes de la liste afin d’obtenir le résultat suivant :

CSS : Utilisez le sélecteur adapté pour modifier les liens des onglets et obtenir un résultat correspondant à l’image ci-dessous :

CSS : Utilisez la classe distinguant le premier onglet pour l’afficher comme dans l’exemple ci-dessous :

CSS : En utilisant un positionnement relatif sur la liste, réglez la position du menu afin de ne pas avoir de bordure visible sur l’onglet actif.

CSS : Ajoutez un effet de survol à vos liens pour changer la couleur d’arrière-plan au passage de la souris.

Animation des onglets avec jQuery

Vos fichiers sont prêt, nous allons maintenant passer à l’animation de la page afin d’avoir un système d’onglet. Pour cela, nous allons devoir intégrer le framework jQuery ainsi qu’un fichier javascript à notre page web.

Les fichiers créés précédemment sont disponibles ci-dessous :

Intégrez jQuery dans l’en-tête de votre site web en utilisant la version CDN (Content Delivery Network).

Créez un nouveau fichier .js en prenant soin de bien l’enregistrer dans votre dossier racine.

Intégrez le nouveau fichier .js dans votre page avec le code suivant. Prenez garde à bien l’intégrer après jQuery.

<script type="text/javascript" src="script-onglets.js"></script>

Tout est en place. Nous allons maintenant programmer le comportement des onglets en javascript en nous basant sur le framework jQuery. Ouvrez donc le fichier .js afin de le modifier.

JS : La première chose à faire est d’ajouter le code permettant d’attendre que la page soit chargée avant de lancer la surveillance des clics sur les onglets. Nous travaillerons maintenant systématiquement entre les lignes 1 et 3 actuelles.

jQuery( document ).ready(function() {
     /* Code de gestion des onglets  */
});

JS : Nous allons maintenant surveiller les clics sur les liens du menu.

jQuery( document ).ready(function() {
	
	/* On surveille les clics sur les liens du menu de navigation */
	jQuery('#tab-nav a').click(function(e){
		/* Code a executer en cas de clic sur un des liens */	
	});

});

JS : Avant tout traitement, nous allons ajouter le code permettant de désactiver le comportement classique du lien. Ajoutez donc le code suivant :

e.preventDefault();

JS : La prochaine étape est la récupération de l’attribut data-tab du lien sur lequel l’internaute clique. Cela va nous permettre de déterminer quel onglet doit être activé. Cette valeur est récupérée dans une variable nommée tab via le sélecteur this (correspondant à l’élément sur lequel l’internaute viens de cliquer) et la fonction data de jQuery.

var tab = jQuery(this).data('tab');

JS : Nous allons maintenant masquer tous les onglets et ré-afficher celui qui doit l’être. Pour cela, nous allons utiliser les fonctions addClass() et removeClass() de jQuery. L’idée est de supprimer la classe tab-active de partout et de la placer sur le contenu qui doit être affiché. On utilise donc le sélecteur .tab correspondant à la classe des contenus et on supprimer la classe tab-active avec la fonction removeClass(). Pour l’ajout de la classe, on se base cette fois-ci sur l’id qui est déterminé par la valeur récupérée à la question précédente et on utilise la fonction addClass().

/* On suprime la class tab-active de tous les contenus */
jQuery('.tab').removeClass('tab-active');

/* On ajoute la classe tab-active à l'onglet qui doit être visible */
jQuery('#'+tab).addClass('tab-active');

JS : En suivant la même logique que dans les étapes précédentes, il faut maintenant supprimer la classe tab-nav-active de tous les liens du menu pour l’ajouter au lien du menu sur lequel l’internaute vient de cliquer.

Voici donc tous les fichiers complets et commentés :

CSS : Il reste maintenant à peaufiner l’affichage des onglets en CSS.

Cela peut vous intéresser :

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.