jQuery插件MixItUp實(shí)現(xiàn)動(dòng)畫(huà)過(guò)濾和排序
什么是MixItUp?
MixItUp是一個(gè)jQuery插件,提供動(dòng)畫(huà)過(guò)濾和排序。
MixItUp是偉大的,像管理投資組合,畫(huà)廊和博客的任何分類(lèi)或排序的內(nèi)容,而且還可以作為一個(gè)功能強(qiáng)大的工具,從事應(yīng)用程序的用戶(hù)界面和數(shù)據(jù)可視化。
MixItUp起著很好的與您現(xiàn)有的HTML和CSS,使之成為響應(yīng)布局的絕佳選擇。
而不是用絕對(duì)定位來(lái)控制布局,MixItUp設(shè)計(jì)與現(xiàn)有的在線(xiàn)流布局工作。要使用百分比,媒體查詢(xún),inline-block的,甚至是彎曲盒子?沒(méi)問(wèn)題!
頁(yè)面代碼
<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目標(biāo)與類(lèi)混合容器中的元素。分類(lèi)過(guò)濾添加為類(lèi)和排序?qū)傩蕴砑幼远x數(shù)據(jù)屬性。
建立你的過(guò)濾器控制:
class="filter" data-filter=".category-1">Category 1 class="filter" data-filter=".category-2">Category 2
過(guò)濾發(fā)生在過(guò)濾器按鈕被點(diǎn)擊。
建立您的排序控件:
class="sort" data-sort="my-order:asc">Ascending Order class="sort" data-sort="my-order:desc">Descending Order
排序發(fā)生在排序按鈕被點(diǎn)擊。
CSS
#Container .mix{ display: none; }
在項(xiàng)目的樣式,設(shè)置目標(biāo)元素沒(méi)有顯示屬性。 MixItUp將只顯示那些匹配當(dāng)前的過(guò)濾元件。
JS
實(shí)例MixItUp上使用jQuery的容器:
$(function(){ $('#Container').mixItUp(); });
使用我們的容器的ID,我們可以實(shí)例化MixItUp與jQuery的方法.mixItUp()
以上所述就是本文的全部?jī)?nèi)容了,希望大家能夠喜歡。
- jQuery之排序組件的深入解析
- jquery對(duì)元素拖動(dòng)排序示例
- jquery實(shí)現(xiàn)的鼠標(biāo)拖動(dòng)排序Li或Table
- 用jquery.sortElements實(shí)現(xiàn)table排序
- jquery 表格排序、實(shí)時(shí)搜索表格內(nèi)容(附圖)
- jQuery表格排序組件-tablesorter使用示例
- jqueryUI里拖拽排序示例分析
- jquery實(shí)現(xiàn)表格本地排序的方法
- JQuery實(shí)現(xiàn)帶排序功能的權(quán)限選擇實(shí)例
- jQuery對(duì)JSON數(shù)據(jù)進(jìn)行排序輸出的方法
- jQuery仿360導(dǎo)航頁(yè)圖標(biāo)拖動(dòng)排序效果代碼分享
- JQuery+Ajax實(shí)現(xiàn)數(shù)據(jù)查詢(xún)、排序和分頁(yè)功能
- 頁(yè)面內(nèi)容排序插件jSort使用方法
相關(guān)文章
jQuery中設(shè)置form表單中action值的實(shí)現(xiàn)方法
下面小編就為大家?guī)?lái)一篇jQuery中設(shè)置form表單中action值的實(shí)現(xiàn)方法。小編覺(jué)得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-05-05jQuery toggleClass應(yīng)用實(shí)例(附效果圖)
這篇文章主要介紹了jQuery toggleClass的應(yīng)用,需要的朋友可以參考下2014-04-04jQuery Mobile框架中的表單組件基礎(chǔ)使用教程
jQuery Mobile框架主要針對(duì)移動(dòng)端的Web UI設(shè)計(jì),其中豐富的表單組件調(diào)用起來(lái)也是相當(dāng)方便,接下來(lái)就為大家整理了一份jQuery Mobile框架中的表單組件基礎(chǔ)使用教程,需要的朋友可以參考下2016-05-05jQuery Mobile操作HTML5的常用函數(shù)總結(jié)
jQuery Mobile是針對(duì)移動(dòng)端開(kāi)發(fā)的JavaScript框架,正如其名基于jQuery庫(kù),jQuery Mobile主要被用來(lái)操作HTML5設(shè)計(jì)頁(yè)面UI,下面就來(lái)看一下jQuery Mobile操作HTML5的常用函數(shù)總結(jié):2016-05-05jquery 圓角遮罩圖片實(shí)現(xiàn)圖片圓角
用jquery實(shí)現(xiàn)的圖片圓角效果代碼。2009-05-05可兼容IE的獲取及設(shè)置cookie的jquery.cookie函數(shù)方法
在使用IE來(lái)測(cè)試的時(shí)候,發(fā)現(xiàn)Discuz中的common.js里面的getcookie和setcookie這兩個(gè)方法子啊IE下不起作用,因此有了jquery.cookie.js的由來(lái),感興趣的朋友可以參考下2013-09-09jquery實(shí)現(xiàn)簡(jiǎn)潔文件上傳表單樣式
這篇文章向大家推薦了一款基于jquery實(shí)現(xiàn)的簡(jiǎn)潔文件上傳表單樣式,實(shí)現(xiàn)效果大方精致,極力推薦給大家,希望大家可以喜歡。2015-11-11