Magazine

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.
Yahoo! UI Tab view 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.

Vous pourriez être intéressé par :

Retour à La Une de Logo Paperblog

Ces articles peuvent vous intéresser :

  • Mocha UI

    Prenez un peu de mootools, quelques gramme de canvas et voici ce que vous obtenez. Un générateur de fenêtres draggable et redimensionnable. La particularité de... Lire la suite

    Par  Marie Neff
    INTERNET
  • Barre d'outils Yahoo!, toujours mieux

    La barre d'outils Yahoo!, http://fr.toolbar.yahoo.com/, vient de faire discrètement peau neuve. Il s'agit d'une des premières barres d'outil disponible sur... Lire la suite

    Par  Jean-Michel Plisson
    INTERNET, A CLASSER
  • Projet Yahoo : myM

    MyM est un "social messaging service”, accessible uniquement sur invitation pour le moment. De quoi s'agit-il ?Un nouveau réseau social ? Peut être mais axé... Lire la suite

    Par  Camille Jourdain
    INFORMATIQUE, INTERNET, WEB2.0
  • Yahoo! Questions/Réponses : cultivez-vous !

    Yahoo! Questions/Réponses cultivez-vous

    Le site Yahoo! Questions/Réponses nous permet de poser des questions en tout genre afin qu'elles puissent être répondues. Un bon moyen pour satisfaire votre... Lire la suite

    Par  Chantal Doumont
    INSOLITE, INTERNET
  • Mocha UI : des mini-fen??tres faciles

    Mocha mini-fen??tres faciles

    Greg Houston vient de cr??er une classe bas??e sur MooTools permettant de r??aliser des mini-fen??tres ?? l'int??rieur de la fen??tre du navigateur : il s'agit... Lire la suite

    Par  Cahri Cahri
    INTERNET
  • Google n'aime pas Yahoo!

    Vous avez déjà essayé de faire une recherche avec la fonction site: sur Google? Même si cette requête n'est pas 100% fiable, bien au contraire, si l'on fait... Lire la suite

    Par  Yann Kervarec
    INTERNET, MOTEUR DE RECHERCHE
  • Yahoo Japon se normalise

    Yahoo Japon normalise

    La page Yahoo Japon va ressembler un peu plus à ce qu'il se fait ailleurs sur la planète. Avant cela ressemblait à ça: Beaucoup de logos, beaucoup trop de... Lire la suite

    Par  Thomas Bertrand
    ASIE, INTERNET, MOTEUR DE RECHERCHE

A propos de l’auteur


Dave Lizotte 57 partages Voir son profil
Voir son blog

l'auteur n'a pas encore renseigné son compte l'auteur n'a pas encore renseigné son compte l'auteur n'a pas encore renseigné son compte

Dossiers Paperblog