Quicksand est un plugin JQuery qui peut être utile pour l’affichage un peu travaillé d’une liste d’images ou sur une boutique en ligne.
Le plugin vous permet de trier et filtrer des listes (d’images par exemple) selon des critères, le tout avec des effets de transition à la JQuery. Le résultat est assez agréable pour l’utilisateur mais il ne faut pas en abuser car cela peut vite devenir lourd.
Pour l’appliquer à une liste vous pouvez utiliser le code suivant :
Côté JavaScript :
$('.button').click(function(e) {
$('.all').quicksand( $('.warm li'), {
duration: 1000,
attribute: 'id'
});
e.preventDefault();
});
Côté HTML
<p><a class="button" href="#">Test</a></p>
<ul class="colors all">
<li id="c463033" style="background: #463033"></li>
<li id="c77343d" style="background: #77343d"></li>
<li id="ce83f2f" style="background: #e83f2f"></li>
<li id="cffc223" style="background: #ffc223"></li>
<li id="cffdb59" style="background: #ffdb59"></li>
<li id="c788b6f" style="background: #788b6f"></li>
<li id="c486a5e" style="background: #486a5e"></li>
<li id="c289539" style="background: #289539"></li>
<li id="c174876" style="background: #174876"></li>
</ul>
<ul class="colors warm">
<li id="c62164e" style="background: #62164e"></li>
<li id="c86286e" style="background: #86286e"></li>
<li id="cda79c2" style="background: #da79c2"></li>
<li id="ce83f2f" style="background: #e83f2f"></li>
<li id="cf39079" style="background: #f39079"></li>
<li id="cffc223" style="background: #ffc223"></li>
<li id="cffdb59" style="background: #ffdb59"></li>
<li id="cf2c478" style="background: #f2c478"></li>
</ul>
Il ne faut pas oublier de « binder » un bouton pour lancer le tri.