Megaptery, explorez les profondeurs du web !

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 !

Présentation et utilisation du plugin

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.

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 jQuery 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 (une seule collection d’éléments à déclarer). Pour cela, allez faire un tour sur la page de démonstration du site officiel. Et à vous de jouer !

Redonnez vie à vos listes HTML

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éveloppeurs, graphistes, chefs de projet, etc.

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