🔔 Alert..!! Get 2 Month Free Cloud Hosting With $200 Bonus From Digital Ocean ACTIVATE DEAL

xFilterList is a simple lightweight jQuery plugin used to categorize, sort, and filter a grid of items with CSS3 powered transitions.

Filter filtering

Documentation

Deprecated: For better performance and new improvements it will recommended take a look at Sortboard project.

jQuery xFilterList

A simple jQuery grid list plugin for easy filter and sorting.

How to use

It's very easy, defines only your list using an ul and li tags then
sets your filters in each li tags with the data-filter attribute, it can add many filters for one item.

JS :

var fl = new xFilterList($('sortlist'), {   // you can set the margin in pixels   margin: 5 });  // Filter example fl.filterBy('programing');

HTML :

<ul id="sortlist">   <li data-filter="programing"></li>   <li data-filter="programing back-end"></li>   <li data-filter="programing front-end"></li>   <li data-filter="graphic-design illustration"></li>   <li data-filter="webdesign front-end"></li>   <li data-filter="graphic-design printing"></li> </ul>

Live Demo

See the live demo

Reference

Options :

  • margin : The margin for items defined in pixels.

Public Methods :

  • xFilterList.filterBy(string) : String it's text to filter, it should match to data-filter attribute on li tags matching.

Events :

  • Coming soon..

License

Licensed under the MIT License


You May Also Like