Hi All,
Today we released our first jQuery plugin, which provides an easy way
to add alphabet-based navigation to any UL or OL list. Here's a link to
our announcement blog entry:
http://blogs.ihwy.com/dev/post/jQuery-listnav-plugin-version-10-released.aspx
And below is the info from the blog entry to save you the click. Thanks
to Mike Alsup for his docs about creating jquery plugins, and a shout
out to Liam Byrne, who helped me (via this list) a few months ago with
some jQuery for isolating text inside of list items.
- Jack
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
blogged....
Today we're releasing a jQuery plugin that we created for the business
directory section of a pet project site of ours,
http://www.hwy9.com/Directory/boulder-creek.aspx.
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 demos here:
http://www.ihwy.com/labs/jquery-listnav-plugin.aspx
.
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.
