A repository of over 1000 quality jQuery plugins

jQuery jquery-sdfilterme

jquery-sdfilterme is a jQuery Filter & Sort plugin.

Created by stevedavid

Another simple light-weight jQuery plugin to easily filter and order portfolio, articles, gallery, etc.

Not what you're looking for? Click here to view more Filter & Sort jQuery plugins

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

NameTypeDefaultDescription
filterSelectorstring'.sorter'The jQuery element that is targetting the filter elements
orderSelectorstring'.orderer'The jQuery element that is targetting the sorting elements
durationinteger1000The duration in ms of the moving animation
animationstring'ease'The CSS animation to apply
hoverEffectbooleantrueIf title provided, applies a scale(0, 0) to overlay element when hovering
sortedOutstring'disappear'Set to 'opacity' to reduce the opacity of the non-matching elements to 0.25 instead of disappearing
cssobject// ...The CSS properties to apply to each element

Events

NameParametersDescription
fm.boxClickede, position, orderThis event is triggered when the user clicks on a box (whether data-link is provided or not). Three parameters are given: e is the event; position is the initial position of the clicked box and order is the value of data-order.

Licence

Copyright (c) 2015 Steve David

Licensed under the MIT license.



You might also like these other Filter & Sort jQuery Plugins