jQuery.sdFilterMe

This plugin allows you to display an <ul> list with the shape of a set of boxes that would move according to your filtering needs.

Releases

• v0.2 - 06/08/2015
• v0.1 - 05/08/2015

Changelog

v0.2

• links on boxes with data-link attribute
• message when nothing to show in category
• sorting option available with data-order attribute
• callback handler for the click event

Requirements

jQuery.sdFilterMe requires the latest version of jQuery.

Demo

See this JSFiddle link to see the plugin.

Features

• filtering and sorting options available
• supports unlimited number of elements
• animation and CSS customizable
• boxes are href-able

Usage

• HTML

First of all, you would need to make a <ul> list populated with <li> items containing a img tag (the plugin can handle different image sizes). <li> must have a class attribute to set the categories which filter applies on and can have a data-title attribute to set a title overlaying the box.

<ul id="sort-me">
    <li class="food" data-title="2" data-order="2" data-link="http://www.steve-david.com/">
        <img src="http://lorempixel.com/300/200/food/1"/>
    </li>
    <li class="sports" data-title="5" data-order="5">
        <img src="http://lorempixel.com/300/200/sports/1"/>
    </li>
    <li class="sports" data-title="6" data-order="6">
        <img src="http://lorempixel.com/300/200/sports/3"/>
    </li>
    <li class="business" data-title="1" data-order="1">
        <img src="http://lorempixel.com/300/200/business/4"/>
    </li>
    <!-- and so on -->
</ul>

You then need to add the filter trigerring elements. You define them in the options you pass to the plugin and they can be whatever DOMElement you need. They must have the data-filter attribute matching the class of the <li> elements. For exemple:

<button class="sorter" data-filter="food">Food</button>
<button class="sorter" data-filter="sports">Sports</button>
<button class="sorter" data-filter="business">Business</button>
|
<button class="sorter" data-filter="*">All</button>

You can also add the ordering option. It works the same way and they must have the data-order set to either asc or desc.

<button class="orderer" data-order="asc">ASC</button>
<button class="orderer" data-order="desc">DESC</button>

• jQuery

The syntax of jQuery.sdFilterMe's initialization is the following:

jQuery(function($) {

  $('#sort-me').sdFilterMe({
      filterSelector: '.sorter', // string: selector
      orderSelector: '.orderer', // string: selector
      duration: 1000, // integer: in ms
      animation: 'ease', // string: ease | ease-in | ease-out | linear | ease-in-out
      hoverEffect: true, // boolean
      sortedOut: 'disappear', // string: disappear | opacity
      css: { // object
          overlay: { // object
              background: { // object
                  r: 0, // integer: as in CSS
                  v: 0, // integer: as in CSS
                  b: 0 // integer: as in CSS
              },
              duration: 250, // integer: in ms
              border: '1px solid white', // string: as in CSS
              color: 'white', // string: color
              opacity: 0.5 // float: as in CSS
          },
          border: { // object
              width: 10, // integer: in px
              color: '#2A4153' // string: color
          },
          margin: 10, // integer: in px
          pointer: true // boolean
      },
      nothingToShow: {
          text: 'Nothing to show', // string: text
          color: '#ccc' // string: color
    }
  }).on('fm.boxClicked', function(e, position, order) {
        console.log('Box position is ' + position);
        console.log('Box sort order is ' + order);
    });

});

Options

Events

Licence

Copyright (c) 2015 Steve David

Licensed under the MIT license.