Quicksand – Plugin jQuery – Trie et filtre avec effets d’animations

Posted By Franck Pertegas on 11 Avr 2010 in Framework, Javascript, Programmation | 0 comments

Me revoilà avec la présentation d’un autre plugin jQuery. J’ai trouvé l’effet peu commun et assez agréable à voir. Je vous fait découvrir Quicksand un plugin jQuery qui va vous permettre d’agrémenter vos tries ou filtrages d’éléments avec des animations fluides et assez originales.

Par exemple, pour une utilisation simple, vous allez procéder ainsi :

Pour le js

$('#source').quicksand( $('#destination li') );

pour le html

<ul id="source">
	<li data-id="iphone">iPhone OS</li>
	<li data-id="android">Android</li>
	<li data-id="winmo">Windows Mobile</li>
</ul>

<ul id="destination" class="hidden">
	<li data-id="macosx">Mac OS X</li>
	<li data-id="macos9">Mac OS 9</li>
	<li data-id="iphone">iPhone OS</li>
</ul>

Ce qui va remplacer une collection d’éléments par une autre.

A savoir que l’attribut data-id est valide html5, il existe d’autres méthodes si vous utilisez un autre doctype.

Je vous laisse découvrir les exemples, qui vous donnent une idée de toutes les utilisations possibles et vous renvois vers la documentation pour en apprendre d’avantage sur ce plugin jQuery.

Comme toujours, si vous avez des questions, n’hésitez pas à les laisser à la suite de ce billet 😉