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:
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>