Pemalam jQuery MixItUp melaksanakan penapisan animasi dan sorting_jquery

Apakah MixItUp?

MixItUp ialah pemalam jQuery yang menyediakan penapisan dan pengisihan animasi.
MixItUp sangat bagus untuk mengurus mana-mana kandungan yang dikategorikan atau diisih seperti portfolio, galeri dan blog, tetapi juga berfungsi sebagai alat yang berkuasa untuk bekerja pada antara muka pengguna aplikasi dan visualisasi data.
MixItUp berfungsi dengan baik dengan HTML dan CSS sedia ada anda, menjadikannya pilihan terbaik untuk reka letak responsif.
Daripada menggunakan kedudukan mutlak untuk mengawal reka letak, MixItUp direka untuk berfungsi dengan reka letak aliran dalam talian sedia ada. Ingin menggunakan peratusan, pertanyaan media, blok sebaris atau kotak melengkung? tiada masalah!

Kod halaman

<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 menyasarkan elemen dalam bekas bercampur dengan kelas. Penapisan klasifikasi menambah sifat data tersuai untuk sifat kelas dan isih.

Bina kawalan penapis anda:

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

Penapisan berlaku apabila butang penapis diklik.

Bina kawalan isihan anda:

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

Isih berlaku apabila butang isih diklik.

CSS

#Container .mix{ 
  display: none; 
} 

Dalam gaya item, tetapkan elemen sasaran untuk tidak mempunyai atribut paparan. MixItUp hanya akan memaparkan elemen yang sepadan dengan penapis semasa.

JS

Contoh MixItUp menggunakan bekas jQuery:

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

Menggunakan ID bekas kami, kami boleh membuat instantiate MixItUp dengan kaedah jQuery .mixItUp()

Lihat DEMO Muat turun sekarang

Di atas adalah keseluruhan kandungan artikel ini, saya harap anda semua menyukainya.