ckFilter.js
jQuery Plugin to filter Elements.
This plugin filters elements, you can use it with multiple selection or single selection.
You can find a demo here https://www.jqueryscript.net/other/Filter-Plugin-jQuery-ckFilter.html
Installation
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <script src="/path/to/jquery.ckFilter.min.js"></script>Usage
Structur
<div id="ckFilter"> <div class="filter"> <ul> <li class="ckFilter" data-filter="filter-1">Filter-1</li> <li class="ckFilter" data-filter="filter-2">Filter-2</li> <ul> </div> <div class="containerObj"> <div class="ckFilter-obj filter-1"></div> <div class="ckFilter-obj filter-2 filter-1"></div> </div> </div>Via JavaScript
To call the ckFilter plugin, select your target element with jQuery and do the following:
$('#ckFilter').ckFilter();Options
| Name | type | default | description |
|---|---|---|---|
| buttonClass | string | '.ckFilter-button' | Filter Button Class |
| filterObj | string | '.ckFilter-obj' | the element that is being filtered |
| animation | boolean | false | If you want Animation it works great with flexbox |
| activeClass | string | 'active' | the class which will be added if active |
| animationTime | number | 300 | If animation set 'true' it will set the time needed |
| minWidth | number | 0 | For the animation if you want a min-width |
| dataValue | string | 'filter' | The Data-Attribute |
| multiple | boolean | true | If you want multiple selection |
Functions
Reset the Filter
$('#resetButton').ckFilter.reset();<button id="resetButton">Reset</button>
