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