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

<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