jQuery Plugin For Reordering and Filtering Html Elements - filter.js

jQuery Plugin For Reordering and Filtering Html Elements - filter.js
File Size: 7.04KB
Views Total:
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

filter.js is a lightweight jQuery plugin that allows to dynamically filter and reorder sets of html elements with fade-in and fade-out aniamtions. Suitable for creating a filterable portfolio which allows the visitor to filter items based on selected tags.

See also:

Basic Usage:

1. Create the filter tags.

<div id="tags">
    <a href="#" data-filter="green">Green</a>
    <a href="#" data-filter="blue">Blue</a>
    <a href="#" data-filter="red">Red</a>
    <a href="#" data-filter="yellow">Yellow</a>
</nav>

2. Create the filterable html elements. 

<div id="filter">
    <div style="background: green" data-filter-tags="green"></div>
    <div style="background: blue" data-filter-tags="blue"></div>
    <div style="background: red" data-filter-tags="red"></div>
    <div style="background: yellow" data-filter-tags="yellow"></div>
    <div style="background: orange" data-filter-tags="yellow,red"></div>
    <div style="background: purple" data-filter-tags="blue,red"></div>
    <div style="background: cyan" data-filter-tags="blue,green"></div>
    <div style="background: black" data-filter-tags="green,blue,red,yellow"></div>
    <div style="background: magenta" data-filter-tags="red,blue"></div>
</div>

3. Include the jQuery javascript library and jQuery filter.js at the end of your document.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="filter.js"></script>

4. Initialize the plugin. That's it.

<script type='text/javascript'>
$(function(){
$('#filter').filter();
}); 
</script>

5. Settings.

nav: '[data-filter]',
showAny: false

Change log:

2014-04-21

  • Add setting to show any of the options selected

This awesome jQuery plugin is developed by tommaitland. For more Advanced Usages, please check the demo page or visit the official website.