2013-06-02
MixItUp 是一個專注於做好 filter 和 sort 的 jQuery 套件。相較於 Isotope 在處理 layout 上的威力， MixItUp 更專心在前端提供排序和過濾的的彈性機制。
淺嚐之後覺得很有潛力，於是做個簡單的記錄與分享。
 |
| MixItUp - A CSS3 an jQuery Filter & Sort Plugin |
說明
打造 container 和內容
container 應該有專屬的 ID (e.g. 'Grid')。MixItUp 預設套用在(只在) container 內 class 為 'mix' 的元素 (但透過 'targetSelector' 可以變更)打造 Filter Control
Default handler 發生在任何 class 為 'filter' 的元素，不過，可以藉著變更 'filterSelector' 此設定選項而改變。 參考 'filterLogic' 選項你可以了解更多 MixItUp 處理多重 filter 的細節。
設定值
來特別講講 multiFilter。這個方法能讓多個 filter buttons 處在 'active' 狀態，讓使用者可以用「複選」方式過濾物件。multiFilter
Type: Boolean
Default value: false
當使用 multiFilter 模式， 所有的類別都必須特別指名。比如說，showOnLoad:'cats dogs krakens'，而不是 showOnLoad:'all'
showOnLoad 讓我們指定當 MixItUp 初始時顯示的類別內容，預設值為全部。當我們要加以限定時，將類別以空白隔開，比如 'dogs cats'，或者 'none'
一個結合 multiFilter 和 showOnLoad 的簡單示意：
欲見更多設定值之選項，可參考 http://mixitup.io/#Options
MixItUp 官網
boilerplate - 樣板
不知道該怎麼開始嗎？ 官方很好心地提供了 boilerplate template 。不妨下載研究，從動手修改進行實驗開始吧！MixItUp 官網
