Interactive Search Filter Plugin For jQuery - ckFilter.js
File Size: | 6.14 KB |
---|---|
Views Total: | 2478 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

ckFilter.js is a small and easy-to-use jQuery plugin that provides an interactive search filter functionality on any block of content. The plugin enables the user to search and filter through a group of web contents categorized using CSS classes.
How to use it:
1. Categorize & group your contents using CSS classes as these:
<section class="containerObj"> <div class="ckFilter-obj filter-1 filter-6"> <img src="http://via.placeholder.com/400x400"> <div class="content"> <ul> <li>Filter-1</li> <li>Filter-6</li> </ul> </div> </div> <div class="ckFilter-obj filter-2 filter-5 filter-3"> <img src="http://via.placeholder.com/400x400"> <div class="content"> <ul> <li>Filter-1</li> <li>Filter-2</li> <li>Filter-3</li> </ul> </div> </div> <div class="ckFilter-obj filter-3 filter-6"> <img src="http://via.placeholder.com/400x400"> <div class="content"> <ul> <li>Filter-3</li> <li>Filter-6</li> </ul> </div> </div> <div class="ckFilter-obj filter-4 filter-2"> <img src="http://via.placeholder.com/400x400"> <div class="content"> <ul> <li>Filter-4</li> <li>Filter-2</li> </ul> </div> </div> <div class="ckFilter-obj filter-5 filter-1"> <img src="http://via.placeholder.com/400x400"> <div class="content"> <ul> <li>Filter-5</li> <li>Filter-1</li> </ul> </div> </div> <div class="ckFilter-obj filter-6 filter-5 filter-3 filter-4"> <img src="http://via.placeholder.com/400x400"> <div class="content"> <ul> <li>Filter-6</li> <li>Filter-5</li> <li>Filter-3</li> <li>Filter-4</li> </ul> </div> </div> <div class="ckFilter-obj filter-5 filter-2 filter-4"> <img src="http://via.placeholder.com/400x400"> <div class="content"> <ul> <li>Filter-5</li> <li>Filter-2</li> <li>Filter-4</li> </ul> </div> </div> <div class="ckFilter-obj filter-1"> <img src="http://via.placeholder.com/400x400"> <div class="content"> <ul> <li>Filter-1</li> </ul> </div> </div> <div class="ckFilter-obj filter-5"> <img src="http://via.placeholder.com/400x400"> <div class="content"> <ul> <li>Filter-5</li> </ul> </div> </div> </section>
2. Create your own filter controls using HTML data-filter
attribute as these:
<aside class="filter"> <ul> <li class="ckFilter-button" data-filter="filter-1">Filter-1</li> <li class="ckFilter-button" data-filter="filter-2">Filter-2</li> <li class="ckFilter-button" data-filter="filter-3">Filter-3</li> <li class="ckFilter-button" data-filter="filter-4">Filter-4</li> <li class="ckFilter-button" data-filter="filter-5">Filter-5</li> <li class="ckFilter-button" data-filter="filter-6">Filter-6</li> </ul> </aside>
3. Insert the latest jQuery library and jQuery ckFilter.js into the web page.
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script> <script src="jquery.ckFilter.js"></script>
4. Initialize the plugin by calling the function ckFilter
on the top container.
$(document).ready(function () { $('#ckFilter').ckFilter({ reset: true, multiple: false, animation: true, // more options here }); });
5. All possible plugin options.
$('#ckFilter').ckFilter({ containerID : '#' + this.attr('id'), buttonClass : '.ckFilter-button', filterObj : '.ckFilter-obj', animation : false, activeClass : 'active', animationTime : 300, animationInterval : 0, minWidth : '0', dataValue : 'filter', reset: false, resetClass: '.ckReset', multiple : true });
This awesome jQuery plugin is developed by captainKeller. For more Advanced Usages, please check the demo page or visit the official website.