Dynamic Client-side Filter Plugin With jQuery - oozer

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.