Quicksand - Réorganisez vos listes dynamiquement avec jQuery

Quicksand est un plugin jQuery permettant de réorganiser vos listes de données ou images, dynamiquement suivant certains critères et avec des effets bien réalisés.

Les développeurs de Quicksand, fans de Mac OS, on voulu recréer l'effet de trie des éléments du système, mais avec jQuery.

Le résultat est là, à l'aide de filtres, vous aurez la possibilité de trier dynamiquement, avec un effet de transition, les éléments de votre liste.

Du point de vue compatibilité navigateurs, tous sauf IE6 sont supportés:

• Safari 4
• Chrome 4
• Firefox 3.5, Firefox 3.0
• Opera 10.15
• Internet Explorer 7
• Internet Explorer 8

Voyons maintenant un exemple de trie sur la team des Webbies ci-dessus.

Côté HTML:

          <ul class="webbies">
            <li data-id="ab"><img src="../content/images/webby-andy-budd.png" width="110" height="110" alt="" /></li>
            <li data-id="ac"><img src="../content/images/webby-andy-clarke.png" width="110" height="110" alt="" /></li>
            <li data-id="db"><img src="../content/images/webby-dan-benjamin.png" width="110" height="110" alt="" /></li>
            <li data-id="dc"><img src="../content/images/webby-dan-cederholm.png" width="110" height="110" alt="" /></li>
            <li data-id="dr"><img src="../content/images/webby-dan-rubin.png" width="110" height="110" alt="" /></li>
            <li data-id="ds"><img src="../content/images/webby-dave-shea.png" width="110" height="110" alt="" /></li>
            <li data-id="dbw"><img src="../content/images/webby-doug-bowman.png" width="110" height="110" alt="" /></li>
            <li data-id="em"><img src="../content/images/webby-eric-meyer.png" width="110" height="110" alt="" /></li>
            <li data-id="jz"><img src="../content/images/webby-jeffrey-zeldman.png" width="110" height="110" alt="" /></li>
            <li data-id="jk"><img src="../content/images/webby-jeremy-keith.png" width="110" height="110" alt="" /></li>
            <li data-id="jh"><img src="../content/images/webby-jon-hicks.png" width="110" height="110" alt="" /></li>
            <li data-id="js"><img src="../content/images/webby-jonathan-snook.png" width="110" height="110" alt="" /></li>
            <li data-id="si"><img src="../content/images/webby-shaun-inman.png" width="110" height="110" alt="" /></li>
            <li data-id="vd"><img src="../content/images/webby-veerle-duoh.png" width="110" height="110" alt="" /></li>
          </ul>

Vous remarquerez l'utilisation de data-id, propriété servant à faire le trie. data-* est une propriété valide HTML5.

Toujours en HTML, mais du côté des liens qui permettent de filtrer les données:

    <p id="load-webbies">
            <a href="#">Webbies</a>: 
            <a href="ajax/ajax-brits.html" class="button">Brits</a>
            <a href="ajax/ajax-developers.html" class="button">Developers</a>
            <a href="ajax/ajax-westerners.html" class="button">Westerners</a>
            <a href="ajax/ajax-designers.html" class="button">Designers</a>
            <a href="ajax/ajax-legends.html" class="button">Legends</a>
          </p>

Les liens pointent vers les fichiers Ajax ou HTML (si non dynamique) de réponse qui devra donner la liste suivant le trie en question.

Et voyons maintenant la partie jQuery:

  $(function() {
    $('#load-webbies a.button').click(function(e) {
      $.get( $(this).attr('href'), function(data) {
          $('.webbies').quicksand( $(data).find('li'), 
            {
              adjustHeight: 'dynamic',
              attribute: function(v) {
                return $(v).find('img').attr('src');
              }
            } );
      });  
      e.preventDefault();  
    });
  });

Et maintenant, lorsque vous cliquerez sur l'un des liens filtres, la liste se réaffichera dynamiquement!

Allez donc jeter un coup d'oeil à la démo de l'exemple.

Site Officiel