Das jQuery-Plug-in MixItUp implementiert Animationsfilterung und -sortierung_jquery

Was ist MixItUp?

MixItUp ist ein jQuery-Plug-in, das animiertes Filtern und Sortieren ermöglicht.
MixItUp eignet sich hervorragend für die Verwaltung kategorisierter oder sortierter Inhalte wie Portfolios, Galerien und Blogs, dient aber auch als leistungsstarkes Tool für die Arbeit an Anwendungsbenutzeroberflächen und Datenvisualisierungen.
MixItUp funktioniert gut mit Ihrem vorhandenen HTML und CSS und ist daher eine ausgezeichnete Wahl für responsive Layouts.
Anstatt die absolute Positionierung zur Steuerung des Layouts zu verwenden, ist MixItUp so konzipiert, dass es mit vorhandenen Online-Flow-Layouts funktioniert. Möchten Sie Prozentsätze, Medienabfragen, Inline-Blöcke oder sogar gebogene Boxen verwenden? Kein Problem!

Seitencode

<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 zielt mit der Klasse auf die Elemente im gemischten Container ab. Durch die Klassifizierungsfilterung werden benutzerdefinierte Dateneigenschaften für Klassen- und Sortiereigenschaften hinzugefügt.

Erstellen Sie Ihre Filtersteuerung:

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

Die Filterung erfolgt, wenn auf die Filterschaltfläche geklickt wird.

Erstellen Sie Ihre Sortierkontrolle:

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

Die Sortierung erfolgt, wenn auf die Schaltfläche „Sortieren“ geklickt wird.

CSS

#Container .mix{ 
  display: none; 
} 

Stellen Sie im Stil des Elements das Zielelement so ein, dass es kein Anzeigeattribut hat. MixItUp zeigt nur die Elemente an, die dem aktuellen Filter entsprechen.

JS

Beispiel MixItUp mit jQuery-Container:

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

Mithilfe der ID unseres Containers können wir MixItUp mit der jQuery-Methode .mixItUp() instanziieren

DEMO ansehen Jetzt herunterladen

Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, er gefällt Ihnen allen.