Le Blog Topheman par Christophe Rosset

Intro

Récemment, j'ai eu comme idée de modifier un peu le thème de mon blog (le design, pour les non-initiés) en faisant apparaître les boutons du menu de navigation les uns après les autres. J'ai abandonné l'idée, considérant que ce serait peut-être un peu trop désagréable à la lecture au bout de quelques pages.

Cela m'a donné une autre idée : faire un plugin jQuery qui simplierait la création de ce genre d'animation. Un développeur gérant bien les callbacks en jQuery/javascript n'aurait aucun mal à écrire le code nécessaire en utilisant les fonctions natives de jQuery, cependant, ce code pourrait vite faire beaucoup de lignes ou se compliquer avec des fonctions recursives.

Que fait le plugin jQuery.cascadeShow ?

Il permet non seulement d'ajouter des effets basiques de type fadeIn/fadeOut/slideUp/slideDown/show/hide/toggle … à une collection d'éléments récupérée via l'objet jQuery() mais aussi et surtout d'éxécuter ces effets sur chacun d'eux à tour de rôle.

• VOIR LA DEMO
• TELECHARGER jQuery.cascadeShow.js

Paramètres gérés par le plugin

Le premier paramètre est un objet dans lequel vous pouvez préciser les attributs suivants :

• effects : les effets que vous voulez appliquer aux éléments (par défaut fadeIn/fadeOut) en les séparant par un espace
• speed : " slow ", "fast " ou un nombre de millisecondes
• order : " asc "/ "desc " (par défaut à " asc ") vous permet de choisir l'ordre dans lequel seront traités les éléments
• onStartShowAll : true/false (par défaut à false) affiche les éléments au lancement du script si true
• onStartHideAll : true/false (par défaut à false) cache les éléments au lancement du script si true

Le deuxième paramètre est une fonction qui sera exécutée à la fin de l'animation. Ainsi, vous pouvez chainer des animations :

Un exemple d'appel à jQuery.cascadeShow() :

jQuery('ul.nav li').cascadeShow({effects:"show fadeOut",speed:"fast",onStartHideAll:true});

N'hésitez pas à aller voir la démo où vous trouverez plus d'exemples.

jQuery & Me

J'utilise jQuery régulièrement au boulot depuis longtemps. La seule chose que j’aurais à reprocher à ce framework est qu’on oublierait aisément qu’on développe en javascript – on finit donc facilement par ne plus " développer qu’en jQuery " …

C’est après avoir visionné le screencast de Paul Irish " 10 Things I learned from the jQuery source " que je me suis plongé dans le code source de la bête que je considérais avant un peu comme " une boîte noire " qui reçoit des valeurs et en renvoit. Je vous conseille vivement cette vidéo qui m’a démystifié cet objet jQuery() que nous appelons tout le temps, sans nous soucier de ce qui se passe à l’intérieur …

Pourquoi avoir créé un tel plugin ?

Je suis conscient que ce plugin ne va pas révolutionner notre utilisation de jQuery. Ma démarche était plus dans la découverte. Plutôt que d’écrire un énième plugin de tooltip, de soumission de formulaire en AJAX ou encore de gallerie de photos, je souhaitais développer un plugin original que je pourrais partager avec la communauté …

Certes, le plugin n’a l’air de rien au premier abord, mais j’ai pu expérimenter, en le codant, quelques spécificités propres au langage javascript telles que les " self-executing recursive anonymous functions " (désolé de l’écrire en anglais, mais il est difficile de le traduire en français sans que ça sonne ridicule ou que ça perde son sens). Ainsi, si vous fouillez dans le code source de mon plugin, vous pourrez voir ce joli pattern, inspiré d'un commentaire dans cet article.

jQuery.cascadeShow.js – partie du code source

(recursiveApplyCallBacks = new Function('elems,callback,options',templateCode))($(elems),callback,options)

Je mets ce plugin à votre disposition, utilisez-le autant que vous le voulez et surtout, n’hésitez pas à me faire des retours.

Tophe

A lire aussi ...

• Chaîne : Mes outils de blogging

Les commentaires sont fermés.