Les articles de votre blog ici ? Inscrivez votre blog !

ACCUEIL ›

Créer une boite d'onglet à votre site à l'aide de Yahoo! UI Tab View

Publié le 18 mars 2008 par Dave Lizotte

Les onglets sont à la mode depuis l'arrivée du Web 2.0 sur nos écrans. Très pratiques, ces onglets permettent d'intégrer plus de contenu dans votre page sans pour autant surcharger celle-ci. De plus, il pousse l'internaute à interagir avec votre site. Mais en tant que programmeur web vous vous êtes surement déjà demandé comment intégrer tout cela à votre propre site web ou votre blogue.
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/yahoo-dom-event.js"></script>
   <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.