Tabulous.js, plugin jQuery pour l’animation de tabs

Tabulous-js-plugin-jquery-animation-tab

Donnez du peps à vos tabs HTML avec le plugin jQuery Tabulous.js.

En activant ce plugin, vous pourrez insérer facilement de subtiles animations au contenu d’une tab lorsque cette dernière est activée.

Quatre options d’animations sont disponibles : scale / slideLeft / scaleUp / flip

Voir la démo Tabulous

Par Guillaume Palayer Un chasseur-cueilleur et un curieux avant tout des dernières avancées du monde des Internets. Fondateur du Magazine du Webdesign, un blog-cerveau à propulsion humaine, ayant pour mission de faire le tri dans le bruit du Web afin de proposer les meilleurs contenus à la communauté du Magazine du Webdesign.

Inscrivez-vous à la newsletter du Magazine du Webdesign

Inscrivez-vous à notre newsletter afin de recevoir chaque mois une sélection des meilleurs articles et ressources.

Designmodo Shop

Commentaires (3)

  1. Ping : Tabulous.js, plugin jQuery pour l’animati...

  2. Ludo

    Hello,
    Je viens d’utiliser cet « outil » et il a un super rendu.
    Toutefois j’ai rencontré un souci avec mes liens mis dans les tabs. Un peu « bizarres » pour certains effets. Qu’ils soient en texte ou en image.
    En effet sur la version « Scale » :
    - mes textes liens n’étaient pas pris en entier, des fois il y avait juste les premières lettres. Dans le code j’avais précisé target= »_blank ».
    - Pour mes images certaines étaient à peu près à la même hauteur sur deux tabs différentes mais la balise alt qui s’affichait était celle d’une autre tab (superposition ?)
    - quant aux liens il ne fonctionnaient pas et me faisaient juste changer de tab mais affichait une tab blanche (vide) ben oui y a pas de tab avec le nom de mon url ;)
    Du coup j’ai changé d’effet et cela a rétabli mes premiers « soucis » mais par contre toujours pas d’ouverture de la bonne page :(
    J’ai donc modifié mon target= »_blank » par un petit onclick= »window.open(this.href); return false; et là cela fonctionne.
    Bon ma tab disparaît mais il suffit de recliquer sur le « menu » pour la faire réapparaître.
    J’ai fait un mail au créateur Aaron et je n’ai pas encore eu de retour de sa part. Bon mon anglais est pas génial donc j’espère qu’il aura compris mes explications.
    Je vous tiens au jus.

  3. simon nedjari

    j’ai eu le meme probleme lorsque l’on veut rajouter un lien dans une tab, personnellement je n’y connait pratiquement rien en javascript, alors dans les lignes de code suivantes:

    var links = this.$elem.find(‘a’);
    var firstchild = this.$elem.find(‘li:first-child’).find(‘a’);

    j’ai simplement changé (‘a’) par (‘.tablink’) que j’ai rajouté en class aux liens
    dans le du code source, et ca marche nickel.

Laisser un commentaire

Yep, vous souhaitez poster un commentaire... complétez les trois champs ci-dessous. Pas de spams, protégeons les Internets.

*

You may use these HTML tags and attributes:
<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

↑ Haut de page