D’après Wikipedia, un carrousel est — notamment — « une attraction de type manège consistant en une plateforme tournante avec des sièges pour des passagers », c’est à dire ni plus ni moins qu’un manège.

Ce terme est aussi utilisé en photographie pour désigner les bacs circulaires que l’on utilise avec les projecteurs de diapositives, ou en musique pour désigner les supports des disques dans les jukeboxes.

Au niveau des interfaces graphiques, la navigation dans une liste représentée par un carrousel en 3 dimensions fait petit à petit son chemin. Elle donne une impression de manipulation physique des objets qui améliore l’ergonomie et l’intuitivité de l’interface.

Apple l’a bien compris en rachetant CoverFlow, un carrousel — non circulaire celui-ci — permettant de sélectionner de la musique dans iTunes en visualisant les pochettes :

CoverFlow

Navigation en 3D dans la discothèque iTunes

Microsoft a aussi fait la démonstration des capacités 3D de Windows Presentation Foundation et de Silverlight — dans Popfly par exemple — à l’aide de carrousels.

Le carrousel d’Amazon est en Flash, une technologie vectorielle, et donc particulièrement bien adaptée à la simulation de la 3D par déformation :

Le carrousel d’Amazon

Mais il n’est pas nécessaire de disposer d’une technologie spécifiquement dédiée ou adaptée à la 3D pour réaliser de tels carrousels, comme le montre aujourd’hui Alapage :

Le carrousel d’Alapage

Ce carrousel s’appuie tout simplement sur l’élément « 3D Carousel » de l’excellent plugin Interface de la librairie JavaScript jQuery.

Je suis plutôt de la seconde catégorie, et ça tombe bien parce que SPIP le permet, donc c’est ce que j’avais toujours proposé sur Gastero Prod.

Maintenant, si vous avez Javascript activé, vous allez pouvoir choisir vous-même comment vous souhaitez lire les commentaires !

Tout cela est rendu possible par la librairie Javascript magique jQuery, qui me permet d’ajouter ce fonctionnement de manière non intrusive en Ajax.

Le besoin particulier qui m’a conduit à trouver la solution que je vais exposer ici est de sélectionner des éléments dont le contenu texte est exactement égal à une chaine de caractères donnée.

jQuery propose le filtre contains() qui permet d’identifier des éléments qui contiennent la chaine de caractères ’text’, de l’une des manières suivantes :

Malheureusement, ce filtre ne permet pas d’identifier des éléments qui contiennent exactement la chaine 'text', donc il faut le faire soit-même.

La solution directe, sans étendre jQuery, est d’utiliser filter() :

Si cela est réalisable une ou deux fois dans un code relativement peu volumineux, il devient vite pénible de recopier tout ce code pour une opération qu’on imaginerait plus simple.

Heureusement, il est possible d’étendre jQuery, soit par des plugins soit directement jQuery lui-même et ses éléments, dont ses filtres. Cette dernière possibilité n’est par contre pas bien — voire pas du tout [1] — documentée.

Voici ce que ça donne pour le besoin particulier exprimé précédemment :

Une fois ceci fait, il est possible de filtrer les éléments de la manière suivante :

Simple, n’est-ce pas ?

Ce qu’il faut savoir pour écrire ses propres filtres est surtout la définition des variables disponibles. Vous avez sans doute vu ces étranges a et m[3] dans le code ci-dessus. La première impression pourrait être que cela ne permet de filtrer que les éléments de type lien — balise <a> — mais il n’en est rien, ce a n’est qu’un nom de variable.

Voici donc la fameuse liste des variables, grâce à ce mail de Danny Wachsstock sur la liste de discussion jQuery :

• a pour l’élément à filtrer
• m[3] pour ce qui est entre parenthèses dans le sélecteur
• i pour l’index de l’élément à filtrer
• r pour le tableau complet d’éléments

Comme indiqué dans le mail cité précédemment, vous trouverez de nombreux exemples dans cette liste de sélecteurs aditionnels.

A vous de jouer !

Ces deux premiers messages montrent bien mon attachement à deux sujets qui me sont toujours chers :

• la création Web avec un message sur le changement de couleur de fond de page avec Javascript dans comp.lang.javascript [2]
• le cinéma avec un message sur les musiques des films de John Woo dans fr.rec.cinema.discussion

Je n’utilise plus les newsgroups depuis quelque temps maintenant, trouvant plutôt sur le Web les réponses à mes questions, mais j’y retournerais un jour, c’est sûr ...