You are here

Sorting and filtering lists in an interactive, animated way: the jQuery plugin Quicksand

In this tutorial, we'll create an HTML list, which can visually and dynamically self-filter and self-sort.  We'll start by creating an unordered list whose child <li> elements have some extra attributes, effectively creating multiple sets of sub-lists in the overall list.  Once we have that HTML setup, we can use a very clever jQuery library called Quicksand which can make the overall list organize itself into its sub-lists dynamically (and attractively).  Let's get started implementing this via a Drupal 7 theme!

Download the jQuery plugin

  • Download the Quicksand plugin from http://razorjack.net/quicksand/ (see the Download arrow at the very bottom)
  • Place this file somewhere in your custom module /js subfolder

 

Add js file to your theme.info file

Make sure that your custom theme knows about the existence of this new file and to load it.  Edit your theme's .info file to include the location of this new script

 

Add a new page which will include your newly dynamic list

Here is the html your page should contain.  The form at the top is what the user will use to filter our list into its sub-lists. 

The list at the bottom uses the data-id attribute as a unique identifier for each element, while the data-type attribute is used to break up the overall list into sub-lists we can filter it into.

<form id="filter">
  <fieldset>
    <legend>Filter by type</legend>
    <label><input type="radio" name="type" value="all" checked="checked">Everything</label>
    <label><input type="radio" name="type" value="list1">Some portion</label>
    <label><input type="radio" name="type" value="list2">Another portion</label>
  </fieldset>
</form>

<ul id="list1">
  <li data-id="option1" data-type="list1">Option 1</li>
  <li data-id="option2" data-type="list1">Option 2</li>
  <li data-id="option3" data-type="list2">Option 3</li>
  <li data-id="option4" data-type="list1">Option 4</li>
  <li data-id="option5" data-type="list1">Option 5</li>
  <li data-id="option6" data-type="list2">Option 6</li>
</ul>

Here is the jQuery code that reacts on the form selections above and uses our new Quicksand library to reconfigure the list.  Make sure you modify it to use the id's attributes you used if they are not identical to mine:

<script type="text/javascript">
(function ($) {
	$(document).ready(function() {

	(function ($) {

	  // bind radiobuttons in the form
	  var $filterType = $('#filter input[name="type"]');

	  // get the first collection
	  var $list = $('#list1');

	  // clone applications to get a second collection
	  var $data = $list.clone();

	  // attempt to call Quicksand on every form change
	  $filterType.change(function(e) {
		if ($($filterType+':checked').val() == 'all') {
		  var $filteredData = $data.find('li');
		} else {
		  var $filteredData = $data.find('li[data-type=' + $($filterType+":checked").val() + ']');
		}

		// finally, call quicksand
		$list.quicksand($filteredData , {
		  duration: 800
		});
	  });

	})(jQuery);
	});
}(jQuery));
</script>

Using images

Once you have the above setup working, using images in your list is not that difficult to implement.  If you look at the source code in the demo site, you'll see it's a straightforward modification

<li class="app" data-id="id-3" style="transform: scale(1);">
  <img width="128" height="128" src="images/finder.png?1354486198">
  <strong>Finder</strong>
  <span>1337 KB</span>
</li>

 

Share

Add new comment

Plain text

  • No HTML tags allowed.
  • Web page addresses and e-mail addresses turn into links automatically.
  • Lines and paragraphs break automatically.