Tabulous.js, un système d’onglets animé avec jQuery et CSS3

1 juillet 2013

Tabulous.js est un petit plugin jQuery qui permet de réaliser facilement un système d’onglets, aussi appelés « tabs », doté de transitions et transformations CSS3 qui animent le changement de contenu, et compatible avec l’ensemble des navigateurs modernes.

Animez vos tabs avec classe

Le système d’onglets est un élément de navigation très pratique dans une page web car il permet de présenter plus d’informations et d’y accéder plus facilement, sans avoir à systématiquement changer de page. Simple à mettre en place, Tabulous.js fonctionne avec n’importe quel type contenu HTML, et ajoute des animations CSS3 fluides entre chaque onglet pour redonner vie à votre contenu.

tabulous_jquery

La feuille de style fournie avec le script contient toutes les classes CSS nécessaires à l’animation, en l’occurence les propriétés CSS3 transform et transition, ainsi que le style graphique des « tabs » que vous pouvez bien sûr modifier à votre guise. Le plugin ne dispose que d’un seul paramètre JS. Il s’agit de l’effet de transition qui propose 4 types :

  • scale : effet de zoom descendant qui fait disparaître le contenu en « dézoomant » et apparaître en zoomant.
  • scaleUp : effet de zoom ascendant qui fait disparaître le contenu en zoomant et apparaître en « dézoomant ».
  • slideLeft : effet de slideshow qui fait disparaître le contenu en slidant sur la gauche et et apparaître en slidant sur la droite.
  • flip : effet de retournement qui fait disparaître et apparaître le contenu en se retournant sur l’axe Y.

Mise en place de Tabulous.js

Il faut commencer par inclure le framework jQuery et les fichiers du plugin (tabulous.css et tabulous.js) dans l’entête de votre document HTML :

<link href="tabulous.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="tabulous.js"></script>

Ensuite, on définit la structure HTML du système d’onglets avec des ID prédéfinis. À noter que la feuille de style cible jusqu’à 5 « tabs » maximum, mais vous pouvez facilement améliorer ceci en utilisant une classe CSS commune à chaque onglet.

<div id="tabs">
   <ul>
      <li><a href="#tabs-1" title="">Tab 1</a></li>
      <li><a href="#tabs-2" title="">Tab 2</a></li>
      <li><a href="#tabs-3" title="">Tab 3</a></li>
   </ul>
   <div id="tabs_container">
      <div id="tabs-1">
         <!--tab content-->
      </div>
      <div id="tabs-2">
         <!--tab content-->
      </div>
      <div id="tabs-3">
         <!--tab content-->
      </div>
   </div>
</div>

Et on termine par l’appel jQuery avec en sélecteur le système d’onglets, à savoir l’ID tabs.

$(document).ready(function($) {
   $('#tabs').tabulous({
      effect: 'scale'
   });
});

Tabulous.js est donc un plugin simple, léger et facile à prendre en main qui vous permettra de réaliser des systèmes d’onglets réactifs et fluides à la navigation.

Requis : jQuery
Compatibilité : Navigateurs modernes (IE9+)
Démonstration : http://git.aaronlumsden.com/tabulous.js/
Licence : MIT

Commentaires

  • Dan

    Superbes effets merci.

  • VeenZ

    Merci beaucoup je l’utilise pour mon site c’est très utile

    • Fabaf

      Salut, saurais-tu comment en utiliser 2 dans la même page? Je n’y arrive pas… :/

  • friant

    J’ai eu quantité de soucis avec ce plugin. Depuis j’en cherche un autre.