欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

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

 更新時間：2015年04月12日 11:06:43   投稿：hebedich  
MixItUp過濾排序jQuery插件是一款鼠標滑過圖片顯示描述的jQuery過濾排序插件。是一款輕量，但功能強大的 jQuery 插件，提供了對分類和有序內容的美麗的動畫過濾和排序功能。特別適合用于作品集網(wǎng)站，畫廊，圖片博客以及任何的分類或有序內容。

什么是MixItUp？

MixItUp是一個jQuery插件，提供動畫過濾和排序。
MixItUp是偉大的，像管理投資組合，畫廊和博客的任何分類或排序的內容，而且還可以作為一個功能強大的工具，從事應用程序的用戶界面和數(shù)據(jù)可視化。
MixItUp起著很好的與您現(xiàn)有的HTML和CSS，使之成為響應布局的絕佳選擇。
而不是用絕對定位來控制布局，MixItUp設計與現(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目標與類混合容器中的元素。分類過濾添加為類和排序屬性添加自定義數(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; 
}

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

JS

實例MixItUp上使用jQuery的容器：

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

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

查看DEMO   立即下載

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

相關文章

最新評論