Le plug-in jQuery MixItUp implémente le filtrage d'animation et sorting_jquery

Qu'est-ce que MixItUp ?

MixItUp est un plug-in jQuery qui permet un filtrage et un tri animés.
MixItUp est idéal pour gérer tout contenu catégorisé ou trié comme des portefeuilles, des galeries et des blogs, mais constitue également un outil puissant pour travailler sur les interfaces utilisateur d'applications et les visualisations de données.
MixItUp fonctionne bien avec votre HTML et CSS existants, ce qui en fait un excellent choix pour les mises en page réactives.
Plutôt que d'utiliser le positionnement absolu pour contrôler la mise en page, MixItUp est conçu pour fonctionner avec les mises en page de flux en ligne existantes. Vous souhaitez utiliser des pourcentages, des requêtes multimédias, des blocs en ligne ou même des boîtes courbes ? aucun problème!

Code des pages

<div id="Container"> 
  <div class="mix category-1" data-my-order="1"> ... </div> 
  <div class="mix category-1" data-my-order="2"> ... </div> 
  <div class="mix category-2" data-my-order="3"> ... </div> 
  <div class="mix category-2" data-my-order="4"> ... </div> 
</div> 

MixItUp cible les éléments du conteneur mixte avec la classe. Le filtrage de classification ajoute des propriétés de données personnalisées pour les propriétés de classe et de tri.

Créez vos contrôles de filtre :

class="filter" data-filter=".category-1">Category 1 
class="filter" data-filter=".category-2">Category 2 

Le filtrage se produit lorsque vous cliquez sur le bouton de filtre.

Construisez votre contrôle de tri :

class="sort" data-sort="my-order:asc">Ascending Order 
class="sort" data-sort="my-order:desc">Descending Order 

Le tri se produit lorsque vous cliquez sur le bouton de tri.

CSS

#Container .mix{ 
  display: none; 
} 

Dans le style de l'élément, définissez l'élément cible pour qu'il n'ait aucun attribut d'affichage. MixItUp affichera uniquement les éléments qui correspondent au filtre actuel.

JS

Exemple MixItUp utilisant un conteneur jQuery :

$(function(){ 
  $('#Container').mixItUp();  
}); 

En utilisant l'ID de notre conteneur, nous pouvons instancier MixItUp avec la méthode jQuery .mixItUp()

Voir la DÉMO Télécharger maintenant

Ce qui précède représente l’intégralité du contenu de cet article, j’espère que vous l’aimerez tous.