jQuery plugin items filter

標籤：style   http   color   io   os   使用   ar   java   strong   

最近在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檔案也是要包含的).

使用

//簡單的例子 $(‘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

jQuery plugin items filter