Today we're releasing a jQuery plugin that we created for the business directory section of a pet project site of ours, www.hwy9.com. We'd always wanted to have a javascript-based control that we could easily apply to long lists of items to allow quickly navigating around the list. Since most lists are alphabetically sorted, we came up with a plugin that allowed us to have a long list and then, by binding the list to our jQuery listnav plugin, an alphabet-based navigation bar would magically appear above the list, showing all of the letters from A to Z. Clicking on a letter dynamically filters the list, so you can, for example, click on C and the list changes on-the-fly to show you only items beginning with C.
There are lots of neat little features to the control. We've posted full information and demo's here.
A couple of the interesting features worth calling out are 1) that when you hover over a letter in the list navigation bar, a count appears above the letter, telling you how many items will appear if you click that letter 2) letters that don't have any items under them appear looking "disabled", as a visual clue that there aren't any items starting with that letter (so that the user doesn't have to find out by clicking the letter).
One of the demos (demo 4) also shows using the listnav plugin on a list that has floated items in it. In the demo, each list item looks like a box and they are arranged left-to-right, row by row. Clicking on a letter shows only the boxes that have wording that starts with that letter. This could be handy for making an address-book like layout on a web site: click the letter in the navigation to see the contacts that start with Y, for example. Each box can contain anything you want it to: the listnav control pays attention only to the first letter of the first text in the list item.
The control has been optimized for speed. It's able to handle binding to lists with hundreds of items in them very quickly. Any jQuery selector can be used to bind to your lists, so you can bind it to multiple lists on a single page using just a CSS class name, if you want to. It works with UL and OL (numbered) lists. If you use an OL, the numbers restart themselves for each set of list items that appear (ie, if you click on 'C' and that has 5 items, they will appear numbered from 1-5).
We hope you enjoy the jQuery listnav plugin. We enjoyed creating it.
6325ae43-845a-4891-acb1-5a46e49e4e6a|3|4.3