Nous allons donc aujourd'hui voir comment utiliser le framework Yahoo! UI Tab View afin de générer nos onglets. Plusieurs autres méthodes plus faciles peut-être existent, mais aujourd'hui nous avons choisi cette méthode. Donc, suivez les étapes suivantes :
- En premier lieu, télécharger le framework Yahoo! UI
- Ensuite, insérer les scripts suivant avant la balise <head> dans votre page :
<script type="text/javascript" src="http://www.pckult.net/element-beta-min.js"></script>
<script type="text/javascript" src="http://www.pckult.net/connection-min.js"></script>
<script type="text/javascript" src="http://www.pckult.net/tabview-min.js"></script>
Ensuite, tout juste après la balise <body> insérer le code suivant :
<script type="text/javascript">
var myTabs = new YAHOO.widget.TabView("ID_DU_BLOC");
</script>
Créer ensuite votre bloc et donner lui le même ID que vous avez inséré un peu plus haut. Ensuite, il vous suffit de créer une liste ayant pour class «yui-nav» qui contient les entêtes des onglets et pour terminer, créer un dernier bloc ayant comme class «yui-content» qui contiendra le contenu de chaque onglet comme dans l'exemple ci-dessous :
<div id="ID_DU_BLOC">
<ul class="yui-nav">
<li class="selected"><a href="http://www.pckult.net/#">Top 5</a></li>
<li><a href="http://www.pckult.net/#">Statistiques</a></li>
<li><a href="http://www.pckult.net/#">Derniers tutoriels</a></li>
<li><a href="http://www.pckult.net/#">Derniers commentaires</a></li>
</ul>
<div class="yui-content">
<div>
...
</div>
<div>
...
</div>
<div>
...
</div>
<div>
...
</div>
<div>
...
</div>
</div>
</div>
Attention, tous les ID et les noms de classe sont importants. Vous aurez aussi noté qu'à l'intérieur du bloc «yui-content» il y a 4 autre bloc, soit 1 pour chaque lien de la liste.
Pour finir, il suffit de générer le style de vos onglets :
#content-explorer {
padding-top: 20px;
width:100%;
line-height:normal;}
#content-explorer ul {
padding: 10px 10px 0;
list-style: none;
max-width: 770px;
background: url(images/menu_bg.gif) bottom repeat-x;
height: 31px;}
#content-explorer ul li {
float: left;
background: url(images/right.gif) right top no-repeat;
text-align: center;
overflow: hidden;
margin-left: 5px;}
#content-explorer ul li a {
display: block;
background: url(images/left.gif) left top no-repeat;
padding: 10px 20px 6px 20px;
font-weight: bold;
color: #999;}
#content-explorer ul li a:hover {
color: #990000;}
#content-explorer ul li.selected {
background: url(images/right_cur.gif) right top no-repeat;}
#content-explorer ul li.selected a {
background: url(images/left_cur.gif) left top no-repeat;
padding-bottom: 8px;
color: #990000;}
div.yui-content {
overflow: auto;
border-bottom: 2px solid black;
border-right: 2px solid black;
border-left: 2px solid black;
padding: 20px;}
Le CSS ci-haut n'est qu'un exemple. Il n'en va que de vous pour générer l'affichage que vous désirez. Ne vous inquiétez pas sur la visibilité du contenu, car c'est le JavaScript qui gère tout cela et non le CSS.
Jeu de briques
Snake
Pacman
Bubble