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

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.

quicksand

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 😉

Author: Franck Pertegas

Share This Post On

Trackbacks/Pingbacks

  1. YoxView – Plugin jQuery – Une lightbox améliorée | LudiBlog - [...] Quicksand – Plugin jQuery – Trie et filtre avec effets d’animations [...]
  2. jqIsoText – Plugin jQuery – Effet de texte isométrique | LudiBlog - [...] Quicksand – Plugin jQuery – Trie et filtre avec effets d’animations [...]
  3. jQuery – 20 plugin jQuery à retenir | LudiBlog - [...] Je vous en parle ici Un plugin jQuery qui va vous permettre d’agrémenter vos tries ou filtrages d’éléments avec…
  4. Liste de tous les plugins jQuery testés sur le blog | LudiBlog - [...] Image Cube jQuery Approach (mb)Extruder Pajinate jQuery Pagination plugin jQuery Masonry TipTip Quicksand [...]

Submit a Comment

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *