veeeeeeeeery nice ! http://www.pixeline.be/blog/2008/listnav-jquery-plugin-_-really-nice-ui/
On Thu, Oct 2, 2008 at 9:52 PM, Jack Killpatrick <[EMAIL PROTECTED]> wrote: > 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 > <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. > > >
