快捷導(dǎo)航

jQuery插件MixItUp實現(xiàn)動畫過濾和排序

更新時間：2015年04月12日 11:06:43 投稿：hebedich

MixItUp過濾排序jQuery插件是一款鼠標滑過圖片顯示描述的jQuery過濾排序插件。是一款輕量，但功能強大的 jQuery 插件，提供了對分類和有序內(nèi)容的美麗的動畫過濾和排序功能。特別適合用于作品集網(wǎng)站，畫廊，圖片博客以及任何的分類或有序內(nèi)容。

什么是MixItUp？

MixItUp是一個jQuery插件，提供動畫過濾和排序。
MixItUp是偉大的，像管理投資組合，畫廊和博客的任何分類或排序的內(nèi)容，而且還可以作為一個功能強大的工具，從事應(yīng)用程序的用戶界面和數(shù)據(jù)可視化。
MixItUp起著很好的與您現(xiàn)有的HTML和CSS，使之成為響應(yīng)布局的絕佳選擇。
而不是用絕對定位來控制布局，MixItUp設(shè)計與現(xiàn)有的在線流布局工作。要使用百分比，媒體查詢，inline-block的，甚至是彎曲盒子？沒問題！

頁面代碼

<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目標與類混合容器中的元素。分類過濾添加為類和排序?qū)傩蕴砑幼远x數(shù)據(jù)屬性。

建立你的過濾器控制：

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

過濾發(fā)生在過濾器按鈕被點擊。

建立您的排序控件：

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

排序發(fā)生在排序按鈕被點擊。

CSS

#Container .mix{ 
  display: none; 
}

在項目的樣式，設(shè)置目標元素沒有顯示屬性。 MixItUp將只顯示那些匹配當前的過濾元件。

JS

實例MixItUp上使用jQuery的容器：

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

使用我們的容器的ID，我們可以實例化MixItUp與jQuery的方法.mixItUp（）

查看DEMO 立即下載

以上所述就是本文的全部內(nèi)容了，希望大家能夠喜歡。

您可能感興趣的文章:

相關(guān)文章

用Jquery.load載入頁面后樣式?jīng)]了頁面混亂的解決方法
一直想用jquery.load的方法載入新的頁面，以實現(xiàn)局部刷新，結(jié)果發(fā)現(xiàn)樣式?jīng)]了，后來發(fā)現(xiàn)了解決方法，如果不過濾掉一些內(nèi)容的話，直接加載，會使頁面混亂的
2014-10-10
jquery批量設(shè)置屬性readonly和disabled的方法
批量設(shè)置屬性的方法有很多，在本文為大家介紹下使用jquery批量設(shè)置readonly和disabled屬性
2014-01-01
jQuery中的select操作詳解
這篇文章主要介紹了jQuery中的select操作詳解的相關(guān)資料,非常不錯，具有參考借鑒價值，需要的朋友可以參考下
2016-11-11
jQuery側(cè)邊欄隨窗口滾動實現(xiàn)方法
jQuery側(cè)邊欄隨窗口滾動實現(xiàn)方法，需要的朋友可以參考一下
2013-03-03
jQuery實現(xiàn)文本顯示一段時間后隱藏的方法分析
這篇文章主要介紹了jQuery實現(xiàn)文本顯示一段時間后隱藏的方法,結(jié)合實例形式分析了jQuery事件響應(yīng)及頁面元素屬性動態(tài)操作相關(guān)實現(xiàn)技巧,需要的朋友可以參考下
2019-06-06
jquery 添加節(jié)點的幾種方法介紹
添加節(jié)點的方法有很多，在本文將為大家介紹下jquery中添加節(jié)點幾種方法，感興趣的朋友可以參考下
2013-09-09
JQuery.closest(),parent(),parents()尋找父結(jié)點
在50個必備的實用jQuery代碼段看到關(guān)于closest()方法的介紹，考慮到開發(fā)過程中經(jīng)常有找爹的需求，以前用的都是parent()/parents()方法（還經(jīng)常找不到?。跃痛搜芯繉Ρ纫幌?！
2012-02-02
jQuery樹形控件zTree使用小結(jié)
這篇文章主要為大家詳細介紹了jQuery樹形控件zTree使用方法，zTree樹插件的基本使用方法，感興趣的小伙伴們可以參考一下
2016-08-08
jQuery入門基礎(chǔ)知識學(xué)習(xí)指南
這篇文章主要介紹了jQuery入門基礎(chǔ)知識學(xué)習(xí)指南,jQuery是當下最主流人氣最高的JavaScript庫,需要的朋友可以參考下
2015-08-08
使用jQuery實現(xiàn)Form表單提交操作
在Web開發(fā)中,表單提交是一個常見的操作,通過表單提交用戶可以向服務(wù)器發(fā)送數(shù)據(jù),jQuery是一個流行的JavaScript庫,可以簡化處理JavaScript的操作,包括表單提交,在本篇博客中,我們將介紹如何使用jQuery來實現(xiàn)表單提交操作,需要的朋友可以參考下
2024-09-09