Créer des onglets facilement

Dimanche 5 octobre 2008

Langage : JavaScript - Type : Script - Niveau : Débutant

Voici un script permettant de créer très facilement des onglets.
Nous allons utiliser 3 langages :

La struxcture XHTML, qui met en page les onglets. Cette structure est divisé en deux partie, la partie haute regroupant les onglets <div id=”mes_onglets”></div> et la partie basse regroupant les contenus à afficher <div id=”mes_contenus”></div>

^?View Code HTML

<div id="mes_onglets">
	<ul>
		<li id="o_1" class="mon_onglet_selected" onclick="changeOnglet(this);">Onglet 1</li>
		<li id="o_2" class="mon_onglet" onclick="changeOnglet(this);">Onglet 2</li>
		<li id="o_3" class="mon_onglet" onclick="changeOnglet(this);">Onglet 3</li>
		<li id="o_4" class="mon_onglet" onclick="changeOnglet(this);">Onglet 4</li>
		<li class="mon_onglet"><a href="http://www.google.fr" target="_blank">Lien</a></li>
		<div class="clear"></div>
	</ul>
</div>
<div id="mes_contenus">
	<div id="co_1" class="mon_contenu">Mon contenu 1</div>
	<div id="co_2" class="mon_contenu" style="display: none;">Mon contenu 2</div>
	<div id="co_3" class="mon_contenu" style="display: none;">Mon contenu 3</div>
	<div id="co_4" class="mon_contenu" style="display: none;">Mon contenu 4</div>
</div>

Le CSS contenant toutes les classes nécéssaires à l’apparence des onglets.

Ce code doit être placé entre les balises <head></head> de la structure xhtml.

^?View Code CSS

*{
	margin: 0px;
	padding: 0px;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 11px;
}
body{
	width: 400px;
	margin: 10px auto;
}
a{
	text-decoration: none;
	color: #666;
}
ul, li{
	list-style: none;
}
.mon_onglet{
	float: left;
	padding: 2px 10px;
	margin-right: 5px;
	color: #333;
	background: #d8f8ca;
	border: 1px solid #68ce3e;
	cursor: pointer;
	margin-bottom: -1px;
}	
.mon_onglet:hover{
	background: #b8efa1;
}				
.mon_onglet_selected{
	float: left;
	padding: 2px 10px;
	margin-right: 5px;
	color: #333;
	background: #b8efa1;
	border-top: 1px solid #68ce3e;
	border-right: 1px solid #68ce3e;
	border-left: 1px solid #68ce3e;	
	border-bottom: 1px solid #b8efa1;	
	cursor: pointer;	
	margin-bottom: -1px;
}					
.clear{
	clear: both;
}
.mon_contenu{
	color: #666;
	background: #b8efa1;
	border: 1px solid #68ce3e;
	padding: 10px;				
}
#mes_contenus, #mes_onglets{
	width: 400px;
}

Et le javascript qui va rendre nos onglets dynamiques.

Nous avons une fonction changeOnglet(); qui, lorsque l’on clique sur un onglet, change le statut de tous les onglets.

Ce code doit être aussi placé entre les balises <head></head> de la structure xhtml.

^?View Code JAVASCRIPT

function changeOnglet(_this){
	var getOnglets 	= document.getElementById('mes_onglets').getElementsByTagName('li');
	for(var i = 0; i < getOnglets.length; i++){
		if(getOnglets[i].id){
			if(getOnglets[i].id == _this.id){
				getOnglets[i].className = 'mon_onglet_selected';
				document.getElementById('c' + _this.id).style.display 			= 'block';
			}
			else{
				getOnglets[i].className = 'mon_onglet';
				document.getElementById('c' + getOnglets[i].id).style.display 	= 'none';
			}
		}
	}			
}