JQuery plugin to do simple single category filtering on a set of elements
JavaScript
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
example.gif
example.html
jquery.yosimplefilter.js
readme.md

readme.md

Yo Simple Filter

Version .01 | By Chris Johnson | https://github.com/ChrisLTD/yo_simple_filter

Yo Simple Filter does simple single category filtering on a set of elements.

Animated Example

Just activate the plugin on a properly formatted wrapper element, make sure you have a proper set of filters and you're good to go. Alternatively, you can pass alternate selectors as settings to match your custom HTML structure.

Usage Examples

Simple example

<button class="filter" data-filter="">All</button>
<button class="filter" data-filter=".f-fruit">Fruit</button>
<button class="filter" data-filter=".f-vegetable">Vegetables</button>

<div id="items">
    <div class="filter_item f-vegetable">Celery</div>
    <div class="filter_item f-fruit">Apple</div>
    <div class="filter_item f-fruit f-vegetable">Tomato</div>
</div>

<!-- Include JQuery Core above this line -->
<script src="jquery.yosimplefilter.js"></script>
<script>
    $("#items").YoSimpleFilter();
</script>

Options

'childObject' : '.filter_item',                     // Targets to be filtered
'filterObject' : '.filter',                     // Next and Previous button tag
'animate' : true,                               // Should the filtering be animated
'animationSpeed' : 200,                                             // Animation speed in milliseconds
'initCallback' : function() {},                 // Called if plugin initialized on an object
'filterCallback' : function() {}                // Called after a filter is run