Créer une tab avec un effet fade in fade out

La tab est un outil très pratique dans le web pour afficher et masquer du contenu sous forme de plusieurs onglets et conteneurs. Voyons ensemble comment réaliser une tab avec Bootstrap avec un effet d’apparition et disparition en fade in/out. Dans un premier temps il nous faut créer le « squelette » HTML de notre tab. Commençons […]

Posté le par Benoît Philibert|1922 vues

La tab est un outil très pratique dans le web pour afficher et masquer du contenu sous forme de plusieurs onglets et conteneurs. Voyons ensemble comment réaliser une tab avec Bootstrap avec un effet d’apparition et disparition en fade in/out.

Dans un premier temps il nous faut créer le « squelette » HTML de notre tab.

Commençons par la navigation. Dans une balise « ul » pour définir une liste en HTML, nous allons définir la classe « nav » pour la navigation et « nav-tabs » pour spécifier que c’est une navigation sous forme de tab :

<!-- Nav tabs -->

Ensuite, nous devons définir nos balises « li » qui représentent un onglet dans notre tab. Vu que nos onglets affichent du contenu, nous appliquons aussi une balise « a » pour lier l’onglet en question à son contenu. Pour cela, définissez une valeur précédée d’un # dans le préfixe « href ». Nous ferons de même dans le contenu par la suite.

Pour finir avec notre navigation, je vous invite à spécifier le role = « tab » et data-toggle = « tab » pour conclure sur la documentation de notre balise « li ».

<!-- Nav tabs -->
<ul class="nav nav-tabs">
	<li class="active"><a href="#home" data-toggle="tab">Home</a></li>
	<li><a href="#profile" data-toggle="tab">Profile</a></li>
	<li><a href="#messages" data-toggle="tab">Messages</a></li>
	<li><a href="#settings" data-toggle="tab">Settings</a></li>
</ul>

Vous pouvez voir que notre première balise « li » possède la classe « active » pour définir que cet onglet est l’onglet actif lors de l’affichage de la page.
Enfin, pour en finir avec notre première étape, nous devons inclure les conteneurs.

Commençons par spécifier une div de classe « tab-content » qui accueillera tous les conteneurs. Bien entendu, vous devez avoir autant de conteneurs que d’onglets de navigation.

<!-- Nav tabs -->
<ul class="nav nav-tabs">
	<li class="active"><a href="#home" data-toggle="tab">Home</a></li>
	<li><a href="#profile" data-toggle="tab">Profile</a></li>
	<li><a href="#messages" data-toggle="tab">Messages</a></li>
	<li><a href="#settings" data-toggle="tab">Settings</a></li>
</ul>
<!-- Tab panes -->
<div class="tab-content"></div>

Il ne nous reste plus qu’à intégrer autant de div avec la classe « tab-pane » en prenant soin de noter en identifiant « id » le même nom que votre lien « href » situé dans les balises « li » de votre navigation. Par exemple, si le premier onglet possède « #home » alors vous devez définir un id = « home » (attention sans le # qui signifie « id »!).

<!-- Nav tabs -->
<ul class="nav nav-tabs">
	<li class="active"><a href="#home" data-toggle="tab">Home</a></li>
	<li><a href="#profile" data-toggle="tab">Profile</a></li>
	<li><a href="#messages" data-toggle="tab">Messages</a></li>
	<li><a href="#settings" data-toggle="tab">Settings</a></li>
</ul>
<!-- Tab panes -->
<div class="tab-content">
<div id="home" class="tab-pane active">...</div>
<div id="profile" class="tab-pane">...</div>
<div id="messages" class="tab-pane">...</div>
<div id="settings" class="tab-pane">...</div>
</div>

 

Appliquons maintenant l’effet fade in/out à nos conteneurs.

Rajoutez la classe « fade » au sein de chaque div dans la div classe « tab-content » pour définir une animation lors de l’affichage ou du masquage d’un conteneur.

<!-- Nav tabs -->
<ul class="nav nav-tabs">
	<li class="active"><a href="#home" data-toggle="tab">Home</a></li>
	<li><a href="#profile" data-toggle="tab">Profile</a></li>
	<li><a href="#messages" data-toggle="tab">Messages</a></li>
	<li><a href="#settings" data-toggle="tab">Settings</a></li>
</ul>
<!-- Tab panes -->
<div class="tab-content">
<div id="home" class="tab-pane fade in active">...</div>
<div id="profile" class="tab-pane fade">...</div>
<div id="messages" class="tab-pane fade">...</div>
<div id="settings" class="tab-pane fade">...</div>
</div>

 

Terminons notre tab en lui appliquant le script javascript qui va bien.

Si vous voulez que votre tab puisse marcher correctement avec Bootstrap vous devez intégrer ce script directement dans votre page HTML.
On peut s’amuser à décrypter en quelques mots ce que veulent dire ces lignes de code. On comprend que l’utilisateur définit une fonction « e » qui récupère le lien href de notre a « #myTab » (nom générique) et que la fonction doit afficher le conteneur avec cet identifiant avec « show » (je résume!).

<script>// <!&#91;CDATA&#91;
  $('#myTab a').click(function (e) {
    e.preventDefault()
    $(this).tab('show')
  })
// &#93;&#93;></script>

Il est très important de copier coller ce script javascript en dessous des lignes suivantes et non forcément après votre code HTML si les script jQuery et Bootstrap apparaissent plus bas dans votre page. (Pourquoi? Sinon votre script ne marchera jamais car on a besoin de charger les librairies jQuery et Bootstrap avant votre script pour que celui-ci soit comprit et pris en charge).


Ces articles pourraient vous intéresser

Tags

Commenter
Votre adresse email ne sera pas publiée. Champs obligatoire *

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