Un carrousel de produits avec Yahoo UI - 1/2

Avec le développement des interfaces riches (RIA) il est de plus en plus fréquent de croiser des carrousel de produits sur les boutiques en ligne. Il faut dire que cette fonctionnalité est plutôt pratique et permet d'afficher plusieurs produits en rotation sur un espace réduit.

Il existe au moins 2 manières de réaliser cette fonction : en flash ou en javascript. C'est cette dernière voix que nous allons utiliser et faisant appel à la librairie Yahoo UI qui va nous permettre de réaliser le carrousel rapidement et de façon conforme aux standards W3C.

L'idée est de réaliser un carrousel qui ressemble à la copie d'écran ci-dessous : 1 produits mis en avant (à gauche) parmi une liste de 6 produits, le produit à gauche changeant toutes les 2 secondes. Lorsque l'on clique sur l'un des produits de la liste de droite, ce produit est affiché à gauche et le défilement automatique est arrêté.
Pour construire le carrousel, nous allons utiliser le composant TabView de YUI. Les onglets de ce composant sont habituellement situés en haut, mais il est également possible de les afficher à droite ce qui va bien nous aider dans notre cas.

Pour initialiser le composant TabView, nous aurons besoin d'appeler les fichiers suivants :

<script type="text/javascript" src="/yui/yahoo-dom-event/yahoo-dom-event.js"><script>
<script type="text/javascript" src="/yui/element/element-beta-min.js"><script>
<script type="text/javascript" src="/yui/tabview/tabview-min.js"><script>

Il sera également nécessaire d'appeler la feuille de style des onglets :

<link rel="stylesheet" type="text/css" href="/yui/tabview/assets/skins/sam/tabview.css">

Le code html du carroussel se présentera de la manière suivante :

<div class="yui-skin-hp marginbottom" id="Carroussel">
  <div id="product" class="yui-navset">
      <ul class="yui-nav">
          <li id="0">
              <!-- Lien produit 1 -->
          </li>
          <li id="1">
              <!-- Lien produit 2 -->
          </li>
          <li id="2">
              <!-- Lien produit 3 -->
          </li>
          <li id="3">
              <!-- Lien produit 4 -->
          </li>
          <li id="4">
              <!-- Lien produit 5 -->
          </li>
          <li id="5">
              <!-- Lien produit 6 -->
          </li> 
      </ul>
      <div class="yui-content">
          <div style="margin:5px">
              <!-- Détail produit 1 -->
          </div>
          <div style="margin:5px">
              <!-- Détail produit 2 -->
          </div>
          <div style="margin:5px">
              <!-- Détail produit 3 -->
          </div>
          <div style="margin:5px">
              <!-- Détail produit 4 -->
          </div>
          <div style="margin:5px">
              <!-- Détail produit 5 -->
          </div>
          <div style="margin:5px">
              <!-- Détail produit 6 -->
          </div>
      </div>
  </div>
</div>

Le code suivant permet d'initialiser le carroussel et de lui passer les paramètres d'affichage :

var tabView = new YAHOO.widget.TabView('product', { activeIndex: 0 } );
tabView.set('orientation', 'right');

Nous avons maintenant la "carcasse" du carroussel. Nous verront dans le prochain billet comment l'animer.