Quicksand, organisez vos données avec jQuery

25 janvier 2011

Quicksand est un plugin jQuery qui permet d’organiser dynamiquement des listes de données. Celles-ci sont filtrées et triées avec des effets transition très réussis. Un plugin très pratique pour redonner vie à vos listes de données !

Redonnez vie à vos listes HTML

S’inspirant des applications Mac, Quicksand vise à créer une apparence similaire sur des données HTML. Pour ce qui est du fonctionnement, le principe est assez simple. Quicksand remplace une collection de données ou d’images par une autre. Vous n’avez donc qu’à les définir et le plugin se charge du reste.

Voici un exemple d’utilisation de Quicksand : la présentation d’une équipe de webagency. Ici, tous les personnes de l’entreprise sont affichées et peuvent être triées en fonction de leur poste : développeur, graphiste, chef de projet, etc.

Mise en place du plugin

Commencez par déclarer une première liste d’éléments identifiée « source ». Puis déclarez une deuxième liste identifiée « destination » (cachée cette fois-ci) avec des nouveaux éléments et des éléments de la première liste mais disposés différemment. Dans cet exemple, « iphone » est le premier élément de la première liste et le dernier de la deuxième liste… Notez qu’on utilise « date-id » qui est un attribut HTML5.

<ul id="source">
	<li>iPhone OS</li>
	<li>Android</li>
	<li>Windows Mobile</li>
</ul>
<ul id="destination" style="display: none;">
	<li>Mac OS X</li>
	<li>Mac OS 9</li>
	<li>iPhone OS</li>
</ul>

On ajoute un élément HTML à cliquer pour effectuer la transition entre les deux listes.

<div id="button">Cliquez-moi</div>

Il faut ensuite faire appel à la fonction de Quicksand qui passe en paramètre la liste de destination.

$(document).ready(function(){
	$(function() {
	  $('#button').click(function(e) {
		$('#source').quicksand( $('#destination li') );
		e.preventDefault();
	  })
	});
});

Et voilà, c’est terminé. Lorsque vous cliquerez sur votre bouton, la deuxième liste viendra remplacer la première, et notre élément « iphone » sera déplacé ! Cet exemple est relativement simple et statique (déclaration d’autant de listes qu’il y a besoin de filtres), mais vous pouvez implémenter des exemples bien plus complexes avec chargement dynamique des items en AJAX. Bref, à vous de jouer !

Requis : jQuery
Démonstration : http://razorjack.net/quicksand/
Licence : MIT/GPL version 2

Commentaires