Dynamic Client-side Filter Plugin With jQuery - oozer

Dynamic Client-side Filter Plugin With jQuery - oozer
File Size: 11 KB
Views Total:
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

oozer is a jQuery plugin helps you create radio button-based filters to reorder and filter a list of elements with a subtle shuffling animation powered by CSS3 transitions.

How to use it:

1. Include jQuery JavaScript library and the jQuery oozer plugin at the end of the document.

<script src="//code.jquery.com/jquery-1.11.2.min.js"></script>
<script src="src/jquery.oozer.js"></script>

2. Create filters using radio inputs to filter a list of html elements based on data-oozer-filter attribute.

<form method="get">
  <fieldset id="oozer-filters">
    <legend>Filter colors</legend>
    <label>
      <input type="radio" name="oozer-filter" value="" checked="checked">
      show all</label>
    <label>
      <input type="radio" name="oozer-filter" value="red">
      red</label>
    <label>
      <input type="radio" name="oozer-filter" value="purple">
      purple</label>
    <label>
      <input type="radio" name="oozer-filter" value="pink">
      pink</label>
    <label>
      <input type="radio" name="oozer-filter" value="orange">
      orange</label>
    <label>
      <input type="radio" name="oozer-filter" value="yellow">
      yellow</label>
    <label>
      <input type="radio" name="oozer-filter" value="green">
      green</label>
    <label>
      <input type="radio" name="oozer-filter" value="blue">
      blue</label>
  </fieldset>
</form>

3. Categorize your elements using data-oozer-filter attribute as follow.

<ul id="oozer-list" class="colors">
  <li data-oozer-filter="red" class="maraschino">Maraschino</li>
  <li data-oozer-filter="red" class="cayenne">Cayenne</li>
  <li data-oozer-filter="purple" class="maroon">Maroon</li>
  <li data-oozer-filter="purple" class="plum">Plum</li>
  <li data-oozer-filter="purple" class="eggplant">Eggplant</li>
  <li data-oozer-filter="purple" class="grape">Grape</li>
  <li data-oozer-filter="purple" class="orchid">Orchid</li>
  <li data-oozer-filter="purple" class="lavender">Lavender</li>
  <li data-oozer-filter="pink" class="carnation">Carnation</li>
  <li data-oozer-filter="pink" class="strawberry">Strawberry</li>
  <li data-oozer-filter="pink" class="bubblegum">Bubblegum</li>
  <li data-oozer-filter="pink" class="magenta">Magenta</li>
  <li data-oozer-filter="pink" class="salmon">Salmon</li>
  <li data-oozer-filter="orange" class="tangerine">Tangerine</li>
  <li data-oozer-filter="orange" class="cantaloupe">Cantaloupe</li>
  <li data-oozer-filter="yellow" class="banana">Banana</li>
  <li data-oozer-filter="yellow" class="lemon">Lemon</li>
  <li data-oozer-filter="green" class="honeydew">Honeydew</li>
  <li data-oozer-filter="green" class="lime">Lime</li>
  <li data-oozer-filter="green" class="spring">Spring</li>
  <li data-oozer-filter="green" class="clover">Clover</li>
  <li data-oozer-filter="green" class="fern">Fern</li>
  <li data-oozer-filter="green" class="moss">Moss</li>
  <li data-oozer-filter="green" class="flora">Flora</li>
  <li data-oozer-filter="green" class="seam-foam">Seam Foam</li>
  <li data-oozer-filter="blue" class="spindrift">Spindrift</li>
  <li data-oozer-filter="blue" class="teal">Teal</li>
  <li data-oozer-filter="blue" class="sky">Sky</li>
  <li data-oozer-filter="blue" class="turquoise">Turquoise</li>
</ul>

4. Active the filter plugin.

$(document).ready(function() {

  $('input[name="oozer-filter"]').click(function() {
    $("#oozer-list").oozer('filter', $(this).val());
  });

  $('#oozer-list').oozer()
    .bind('beforeFilter.oozer', function(e) {
      $('input[name="oozer-filter"]').each(function() { 
        if (this.getAttribute('value') == e.oozer.filterFor) {
          this.checked = true;
        }
      });
    });
});

5. Default options.

// the element which you will decide whether to show or not
elementSelector : '> *',

// Functions
filter          : 'data-oozer-filter',
sort            : DEFAULT_sort,

// Animations
cssAnimEnabled  : DETECT_transitions(),

animationSpeed  : 500,
animationEasing : null,
resizeSpeed     : 500,
resizeEasing    : null,

// History
historyEnabled  : DETECT_history(),
historyKey      : 'filter'

Change log:

2015-05-29

  • moved to using transitions and provided the example using flexbox

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