Filter In JS with easyfilter is a lightweight jQuery filter plugin that provides an easy way to filter any HTML content with fade or slide animations.
 |
| Filter In JS With easyFilter |
How to use it:
1. Include the jQuery EasyFilter plugin's script after you load the latest jQuery library.
<script src="/path/to/cdn/jquery.min.js"></script> <script src="/path/to/jquery.easyFilter.js"></script>
2. Group your element to be filterable using the data-easyfilter attribute and then insert them together with the filter controls into a filter wrapper element as follows:
<div id="easy-filter-wrap"> <!-- Filter Controls --> <button type="button "data-easyfilter="*"> All </button> <button type="button "data-easyfilter="item01"> Item 01 </button> <button type="button "data-easyfilter="item02"> Item 02 </button> <button type="button "data-easyfilter="item03"> Item 03 </button> <!-- Filterable Elements Here --> <div data-easyitem="item01"> Item 01 </div> <div data-easyitem="item02"> Item 02 </div> <div data-easyitem="item03"> Item 03 </div> </div>
3. Not only buttons, you can use any elements (like checkboxes, radio buttons) as filter controls:
<label data-easyfilter="*"> <input type="radio" name="options" id="option1" checked> All </label> <label data-easyfilter="item01"> <input type="radio" name="options" id="option2"> Item 01 </label> <label data-easyfilter="item02"> <input type="radio" name="options" id="option3"> Item 02 </label> <label data-easyfilter="item03"> <input type="radio" name="options" id="option3"> Item 03 </label>
4. Enable the plugin by calling the function easyFilter on the parent container. That's it.
$(function(){
$('#easy-filter-wrap').easyFilter();
});
5. Customize the animation when filtering elements.
$('#easy-filter-wrap').easyFilter({
// or 'fade'
animation: 'slide',
// duration of the animation
duration: 400
});
6. Determine which filter control should be activated on page load. Default: '*' (all).
$('#easy-filter-wrap').easyFilter({
firstFilter: 'item02'
});
Live Demo
See the Pen Filter In JS With easyFilter by Plugin JS (@pluginjs) on CodePen.
File Info
- File Name :
- filter-in-js-with-easyfilter.zip
- Size :
- 10.90KB
- Site Download :
- Github.com
- Official Website:
- Go to website
- License:
- MIT