JQuery Plugin Items Filter

Recently found a nice filter/filter plugin on GitHub, like the slider component of the jquery UI, not to mention, for example.

JQuery UI

App.js

function Showproducts (Minprice, Maxprice) {    $ ("#products li"). Hide (). Filter (function () {        var price = parseint ( $ (this). Data ("price");        return price >= minprice && price <= maxprice;  Filter according to different price bands    ). Show (); $ (function () {    var options = {        range:true,        min:0,        max:500,        values: [+],        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:! [Enter picture description here] [1]38% ></div>    <ul id= "Products" >        <li data-price= "Ten" > Product-10 </li>        <li data-price= "> product-50 </li>        <li data-price=" "> product-100 </li>        <li data-price= > product-150 </li>        <li data-price= "$" > product-200 </li>    </ul ></div>

Effect

JQuery UI has more examples of portal

Quicksand

The point is, is quicksand, can visit the official website to see its example, Portal

The individual feels relatively flexible compared to the jquery UI, and allows for more customization.

Adds the data-id and data-type attributes to the HTML element that is the filter item to indicate a different ' type ' list item. This step can be combined with the Name property value of the checkbox to filter the display matches.

The quicksand source file is then loaded into the project and can be used directly (it relies on jquery so the jquery file is also included).

Use

Simple example $ (' YourContainer '). Quicksand (' Yourelement ', {     duration:800,     easing:swing  });//Add callback Function Example $ (' YourContainer '). Quicksand (' Yourelement ', {     duration:800,     easing:swing  },function () {     //do something});//or modify the relevant properties directly in the Quicksand.js source file.

There is a notable pit, GitHub on the instructions said jquery.easing this plug-in is optional (the main filter filter animation display support), but I tried the next if not add this plugin to the project is not effective, so if not run remember to add this ( jquery.easing)

Effect

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

JQuery Plugin Items Filter