MixItUp a fait son apparition il y a quelques jours dans le désormais célèbre répertoire de plugins jQuery Unheap. Ce plugin permet de créer en quelques minutes une liste d’items accompagnée d’un système de filtre et de tri.

Il existe de nombreux plugins jQuery pour filtrer et trier des données. J’avais listé un certain nombre de solutions de filtrage dans un précédent article. J’y abordé également les principales règles à respecter pour obtenir une utilisabilité à toutes épreuves accompagnées de quelques exemples. Si vous souhaitez approfondir le sujet, je vous conseille de le lire.

MixItUp – une solution jQuery polyvalente pour ordonner et filtrer vos listes d’items

MixItUp est un plugin jQuery léger offrant de belles animations lors du filtrage et du tri des contenus. Il s’adapte parfaitement à n’importe quelle structure HTML et CSS, ce qui le rend compatible avec la majorité des mises en page fixes, fluides et responsives. Il conviendra merveilleusement bien à un portfolio ou à un listing d’articles et de produits.

MixItUp utilise jQuery pour masquer, afficher ou repositionner les éléments de la liste en fonction des filtres que vous avez définis. Une surcouche de CSS3 transitions CSS3 transitions anime en douceur les éléments pour les accompagner jusqu’à leur nouvel emplacement.

C’est une approche bien plus efficace que l’utilisation de jQuery .animate() et de la position : absolute pour les navigateurs modernes. En n’utilisant pas cette dernière, MixItUp autorise l’emploi des pourcentages et des media queries pour obtenir une mise en page fluide et responsive adaptée aux contraintes des supports mobiles.

Démo de MixItUp

Comment utiliser MixItUp

La liste d’items

Dans un premier temps, mettez en place votre liste d’items :