MixItUp, filtrez et triez vos données dynamiquement avec jQuery

MixItUp est un plugin jQuery qui permet de mettre en place des filtres et des tris sur du contenu HTML classé et ordonné, le tout avec une interface animée et compatible responsive design. C’est une excellente ressource pour les portfolios, les galeries d’images ou n’importe quelle liste d’items.

Redonnez vie à vos listes HTML

MixItUp permet d’organiser dynamiquement des listes de données en se basant sur des filtres et des tris que vous aurez préalablement définis via une structure HTML précise. Ainsi, il affiche ou masque les items avec de superbes transitions et transformations CSS3. Pour cela, il se base sur les attributs data-* de HTML5 qui permettent de stocker une donnée associée à la balise HTML courante.

mixitup_css3_jquery

MixItUp est le remplaçant idéal du plugin jQuery Quicksand qui est assez similaire mais qui se fait « vieux ». En effet, le plugin tire profit des meilleures technologies actuelles avec les data HTML5 et les transitions et transformations CSS3, et fonctionne parfaitement avec les media queries (responsive design). Le script est donc optimisé pour les navigateurs modernes, y compris sur tablette et smartphone.

Le plugin dispose de 25 options pour paramétrer votre liste d’items : vitesse de transition, effets easing, types de transformation (fondu enchainé, zoom, rotation, etc), possibilité de modifier les différentes classes CSS (filtre, tri et puces) ou encore quelques fonctions de callback. Bref, le script est complet. Côté CSS, c’est à vous de styliser votre liste comme bon vous semble mais vous pouvez bien sûr récupérer celles disponibles dans les démonstrations.

Mise en place de MixItUp

On commence par inclure jQuery et le plugin MixItUp :

<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="jquery.mixitup.min.js"></script>

Ensuite, on définit notre structure HTML, en l’occurence une liste à puces non ordonnée. Il faut définir un identifiant CSS sur votre liste (ici grid) et une classe CSS sur chaque puce (ici mix). Nous allons également classer et ordonner nos items en leur définissant une classe CSS (filtre) et un attribut data-cat (tri). Notez que dans cet exemple, nos items sont volontairement structurés en désordre (1, 3, 2, etc).

<ul id="grid">
   <li class="mix category_1" data-cat="1">1</li>
   <li class="mix category_3" data-cat="3">3</li>
   <li class="mix category_2" data-cat="2">2</li>
   <li class="mix category_3" data-cat="3">3</li>
   <li class="mix category_2" data-cat="2">2</li>
   <li class="mix category_1" data-cat="1">1</li>
</ul>

Niveau CSS, le strict minimum est d’appliquer ces propriétés CSS sur chaque item :

#grid .mix{
    opacity: 0;
    display: none;
}

Puis on définit la structure HTML du filtre et du tri. Pour le filtre, il faut utiliser des éléments HTML avec une classe CSS filter et un attribut data-filter avec pour valeur la classe CSS que l’on a défini sur chaque item. On peut ainsi créer un filtre sur plusieurs classes. Pour le tri, il faut utiliser la classe sort et l’attribut data-sort.

<div class="controls">	
   <h3>Filter Controls</h3>
   <ul>
      <li class="filter" data-filter="all">Show All</li>
      <li class="filter" data-filter="category_1">Category 1</li>
      <li class="filter" data-filter="category_2">Category 2</li>
      <li class="filter" data-filter="category_3">Category 3</li>
      <li class="filter" data-filter="category_3 category_1">Category 1 & 3</li>
   </ul>
</div>

<div class="controls">
   <h3>Sort Controls</h3>
   <ul>
      <li class="sort" data-sort="data-cat" data-order="desc">Descending</li>
      <li class="sort" data-sort="data-cat" data-order="asc">Ascending</li>
      <li class="sort" data-sort="default" data-order="desc">Default</li>
   </ul>
</div>

Et on termine par l’appel du plugin sur notre liste :

$(function(){
   $('#grid').mixitup();
});

À noter que vous pouvez l’utiliser sur une liste de données classique, pas forcément disposée en grille. Le plugin est gratuit aussi bien pour un usage personnel que commercial, et la documentation est bien fournie, notamment avec un template Boilerplate pour faciliter l’installation sur un projet. Amusez-vous !

Requis : jQuery
Compatibilité : Chrome 4+, Firefox 4+, Opera 10.5+, Safari 3.1+, Internet Explorer 10+
Démonstration : http://mixitup.io/
Licence : Creative Commons Attribution-NoDerivs 3.0 Unported

Commentaires

  • Sybio

    Une belle alternative au célèbre plugin Quicksand, par contre uniquement compatible IE10 je pense qu’il puisse être utilisé actuellement :s Après pourquoi pas en admin ^^

    • Malgré qu’il soit « fonctionnel » sur IE8+, il manque effectivement un fallback JS pour avoir des transitions.

  • Ah tu es allé plus vite que moi !
    J’ai un article en cours, mais pas eu le temps de le finir. Par contre mon article propose une autre approche. Coming soon ;)

    Merci pour ton article Pierre.

  • DELUXE_ART

    Dommage qu’une page web déjà toute faite ne soit livrée avec le pack en téléchargement car il n y a que des fichiers script et quand on est novice… ça ne sert a rien