jQuery plugin items filter

最近在Github上找到一款不錯的過濾/篩選插件，相似jQuery UI的slider組件，很少說，上例子。

##jQuery UI

app.js

function showProducts(minPrice, maxPrice) {
    $("#products li").hide().filter(function() {
        var price = parseInt($(this).data("price"), 10);
        return price >= minPrice && price <= maxPrice;  //根據不一樣價格區間來篩選
    }).show();
}

$(function() {
    var options = {
        range: true,
        min: 0,
        max: 500,
        values: [50, 300],
        slide: function(event, ui) {
            var min = ui.values[0],
            max = ui.values[1];

        $("#amount").val("$" + min + " - $" + max);
        showProducts(min, max);
    }
}, min, max;

    $("#slider-range").slider(options);

    min = $("#slider-range").slider("values", 0);
    max = $("#slider-range").slider("values", 1);

    $("#amount").val("$" + min + " - $" + max);

    showProducts(min, max);
});

index.html

<!-- lang: html -->
<div>
    <input type="text" id="amount" style="border:0; color:#f6931f; font-weight:bold;" />

    <div id="slider-range" style="width:![在此輸入圖片描述][1]38%"></div>
    <ul id="products">
        <li data-price="10"> product - 10 </li>
        <li data-price="50"> product - 50 </li>
        <li data-price="100"> product - 100 </li>
        <li data-price="150"> product - 150 </li>
        <li data-price="200"> product - 200 </li>
    </ul>
</div>

效果

jQuery UI的官網有更多例子 -> 傳送門

##Quicksand

重點來了，就是Quicksand，可移步官網看它的例子 -> 傳送門

我的以爲相對與jQuery UI，靈活性比較高，能夠實現更多的定製.

給做爲篩選項的html元素加上data-id和data-type屬性以標示不一樣'類型'的列表項.這一步能夠和checkbox的name屬性值共同做用，來篩選顯示匹配項.

而後把quicksand的源文件加載進項目裏就能夠直接使用(它依賴與jQuery因此jQuery文件也是要包含的).

使用

<!-- lang: js -->
//簡單的例子
 $('YourContainer').quicksand('YourElement'， {
     duration：800，
     easing：swing 
 }); 

//加回調函數的例子
 $('YourContainer').quicksand('YourElement'， {
     duration：800，
     easing：swing 
 }，function() {
     //do something
 });
//或者直接在quicksand.js源文件裏修改相關的屬性.

有個值得注意的坑，就是Github上的說明說jQuery.easing這個插件是可選的(主要篩選過濾動畫顯示支持用),可是我試了下若是未加這個插件到項目的話是沒有效果的,因此若是未能運行記得加上這個(jquery.easing)

效果

http://razorjack.net/quicksand/demos/one-set-clone.html