DOMAssistant-Tabs plugin

Préparation

Insérez le code suivant dans le header de la page :

<link rel="stylesheet" type="text/css" href="lib/css/DOMAssistant-Tabs.css" />
<script type="text/javascript" src="lib/js/DOMAssistantCompressed-2.8.js"></script>
<script type="text/javascript" src="lib/js/DOMAssistant-Tabs.0.3.js"></script>
<script type="text/javascript" src="lib/js/tabsLauncher.js"></script>

Modifiez lib/css/ et lib/js/ pour les faire correspondre respectivement au répertoire contenant vos feuilles de styles et à celui contenant les scripts utilisés dans votre page.

Code html

<div id="wrapper">
	<h2>titre d'onglet</h2>
	<p>Contenu de l'onglet</p>
	<h2>titre du deuxième onglet</h2>
	<p>Contenu du deuxième onglet</p>
	[...]
</div>

Code javascript (DOMAssistant)

$("#wrapper").doTabs("h2").addClass("bg1");

La méthode doTabs() retourne la référence DOM du bloc sur lequel elle est appelée (ici : "wrapper").
L'exemple ci-dessus appliquera donc la classe "bg1" à l'élément portant l'id "wrapper" après création des onglets.

Code html généré

<div id="wrapper" class="bg1">
	<div class="DATGpart" id="DATGpart_0">
		<div class="DATtagsBg">
			<ul id="DATtCont_0" class="ongletsCont">
				<li class="DATonglet"><a id="link_0_3" href="#">titre d'onglet</a></li>
				<li class="DATonglet"><a id="link_0_2" href="#">titre du deuxième onglet</a></li>
				[...]
			</ul>
		</div>
		<div class="partsCont">
			<div id="DATpart_0_3" class="DATpart0">
				<h2>titre d'onglet</h2>
				<p>Contenu de l'onglet</p>
			</div>
			<div style="display: none;" id="DATpart_0_2" class="DATpart0">
				<h2>titre du deuxième onglet</h2>
				<p>Contenu du deuxième onglet</p>
			</div>
		</div>
	[...]
	</div>
</div>

Styles appliqués

div.DATtagsBg{
background:#fff url(../graph/onglets_bg.gif) left bottom repeat-x;
font-size:0.5em;
height: 2.0em;
}
ul.ongletsCont {
margin: 0 0 0 1em;
padding: 0.1em 0.5em 0;
list-style: none;
}
.ongletsCont li {
float: left;
margin: 0.2em 0 0 0;
padding: 0 0 0 0.5em;
line-height: 1.5em;
}
.ongletsCont a {
/* Pour IE Mac uniquement \*//*/
float:left;
/**/
display: block;
padding: 0.1em 1em 0.15em 0.5em;
text-decoration: none;
font-weight: bold;
color: #765;
outline: none;
}
.ongletsCont a:hover {
color: #333;
}
.ongletsCont li.DATonglet {
background: url(../graph/onglets_left.gif) no-repeat left top;
}
.ongletsCont li.DATonglet a {
background: url(../graph/onglets_right.gif) no-repeat right top;
}
.ongletsCont li.DATonglet.on {
background: url(../graph/onglets_left_on.gif) no-repeat left top;
line-height: 1.7em;
margin-top: 0;
}
.ongletsCont li.DATonglet.on a {
background: url(../graph/onglets_right_on.gif) no-repeat right top;
color: #333;
padding-bottom: 0.15em;
}

/*Les parties affichées quand on clique sur l'onglet correspondant*/
div.partsCont {
clear: both;
border-width: 0 2px 2px 2px;
border-color: #000;
border-style: ridge;
padding: 1em 2em;
margin-top: 0;
background: #FDFDFC;
color: #080808;
}