jQuery插件MixItUp實現(xiàn)動畫過濾和排序
什么是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()
以上所述就是本文的全部內(nèi)容了,希望大家能夠喜歡。
- jQuery之排序組件的深入解析
- jquery對元素拖動排序示例
- jquery實現(xiàn)的鼠標拖動排序Li或Table
- 用jquery.sortElements實現(xiàn)table排序
- jquery 表格排序、實時搜索表格內(nèi)容(附圖)
- jQuery表格排序組件-tablesorter使用示例
- jqueryUI里拖拽排序示例分析
- jquery實現(xiàn)表格本地排序的方法
- JQuery實現(xiàn)帶排序功能的權(quán)限選擇實例
- jQuery對JSON數(shù)據(jù)進行排序輸出的方法
- jQuery仿360導(dǎo)航頁圖標拖動排序效果代碼分享
- JQuery+Ajax實現(xiàn)數(shù)據(jù)查詢、排序和分頁功能
- 頁面內(nèi)容排序插件jSort使用方法
相關(guān)文章
jQuery中設(shè)置form表單中action值的實現(xiàn)方法
下面小編就為大家?guī)硪黄猨Query中設(shè)置form表單中action值的實現(xiàn)方法。小編覺得挺不錯的,現(xiàn)在就分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2016-05-05jQuery toggleClass應(yīng)用實例(附效果圖)
這篇文章主要介紹了jQuery toggleClass的應(yīng)用,需要的朋友可以參考下2014-04-04jQuery Mobile框架中的表單組件基礎(chǔ)使用教程
jQuery Mobile框架主要針對移動端的Web UI設(shè)計,其中豐富的表單組件調(diào)用起來也是相當方便,接下來就為大家整理了一份jQuery Mobile框架中的表單組件基礎(chǔ)使用教程,需要的朋友可以參考下2016-05-05jQuery Mobile操作HTML5的常用函數(shù)總結(jié)
jQuery Mobile是針對移動端開發(fā)的JavaScript框架,正如其名基于jQuery庫,jQuery Mobile主要被用來操作HTML5設(shè)計頁面UI,下面就來看一下jQuery Mobile操作HTML5的常用函數(shù)總結(jié):2016-05-05可兼容IE的獲取及設(shè)置cookie的jquery.cookie函數(shù)方法
在使用IE來測試的時候,發(fā)現(xiàn)Discuz中的common.js里面的getcookie和setcookie這兩個方法子啊IE下不起作用,因此有了jquery.cookie.js的由來,感興趣的朋友可以參考下2013-09-09