vladimirgi / jquery-list

A plugin to make lists with group headers that float while-you-scroll, ala iOS contacts.

jQuery Floating/Fixed List Header Plugin

This is a jQuery plugin which allows the user to create a list with floating headings while scrolling, a-la iOS & iCal day view. The plugin allows arbitrary markup of the header and list items, and will work nicely with nested elements.

• View at the jQuery Plugin Registry.

Demos

The Demos for this plugin live under the examples/ directory. Open them directly in your web browser, or view the following online examples:

• Basic Demo
• Australian States & Cities Demo
• ScrollTo Demo
• headerChange Demo

The following are Demos not included in the examples/ directory and can only be viewed online:

• Showcasing jQuery List with a fake iPhone

Documentation

Basic list setup

The basic setup will work with any standard dl element with no extra config options.

$('dl').list();

If you want to use the plugin with any other HTML structure, you can use the 'headerSelector' setting to tell the plugin what elements to use as headers.

$('ul').list({ headerSelector : 'li.header' });

Other capabilities include methods which will scroll the list to any heading, with optional animation, and a method which will report the current heading that the user sees. You can also bind to an event which will fire whenever the currently viewed heading changes.

$('dl').list().bind( 'headingChange', myFunction );

Full plugin documentation

The Documentation for this plugin lives under the docs/ directory. Open it directly in your web browser, or see the online documentation.