什麼是MixItUp?
MixItUp是一個jQuery插件,提供動畫過濾和排序。
MixItUp是很棒的,像管理投資組合,畫廊和部落格的任何分類或排序的內容,而且還可以作為一個功能強大的工具,從事應用程式的使用者介面和資料視覺化。
MixItUp起著很好的與您現有的HTML和CSS,使其成為響應佈局的絕佳選擇。
而不是用絕對定位來控制佈局,MixItUp設計與現有的線上流程佈局工作。要使用百分比,媒體查詢,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目標與類別混合容器中的元素。分類過濾會新增為類別和排序屬性新增自訂資料屬性。
建立你的濾鏡控制:
class="filter" data-filter=".category-1">Category 1 class="filter" data-filter=".category-2">Category 2
過濾發生在過濾器按鈕被點擊。
建立您的排序控制項:
class="sort" data-sort="my-order:asc">Ascending Order class="sort" data-sort="my-order:desc">Descending Order
排序發生在排序按鈕被點擊。
CSS
#Container .mix{ display: none; }
在項目的樣式,設定目標元素沒有顯示屬性。 MixItUp將只顯示那些符合目前的過濾元件。
JS
實例MixItUp上使用jQuery的容器:
$(function(){ $('#Container').mixItUp(); });
使用我們的容器的ID,我們可以實例化MixItUp與jQuery的方法.mixItUp()
以上所述就是本文的全部內容了,希望大家能夠喜歡。