jQuery ListNav Plugin Demo

The default configuration

$('#demoOne').listnav();

This is the easiest way to use the plugin. None of the default options are overridden and a jQuery ID selector is used to bind the plugin to a single list.

Override defaults and binding to multiple lists

$('.demoTwo').listnav({
    includeAll: false,
    noMatchText: 'There are no matching entries.'
});

A jQuery class selector is used to bind to two lists. The includeAll default option is overridden, which causes the ALL link to be hidden and the first letter with matches to get pre-selected. The noMatchText default is overridden, providing a custom message for letters with no matching results.

Style your lists however you want!

$('#demoThree').listnav({
    initLetter: 'c',
    includeNums: false
});

The initLetter option is set to letter 'c', which forces the list to load with that letter selected.

The 0-9 number navigation item is hidden by the includeNums:false option.

Using `cookieName` to save last click and utilizing an `onClick` callback

$('#demoFour').listnav({
    cookieName: 'ln-demo5',
    onClick: function(letter) {
        $(".myLastClicked").text(letter.toUpperCase());
    }
});

If you include the jquery.cookie js file in your page before the listnav js file, you can set the cookieName option to have the listnav control remember your user's last clicked navigation item (the cookie value will be 'all', '_' for numbers 0-9 or a lowercase letter 'a' - 'z'). You can also use the onClick callback to fire a custom function when a letter gets clicked. Click a letter to see the onClick function, then reload the page and come back to Demo 5 and you'll see that the list loads your last clicked letter (obtained from the cookie value).

You Just Clicked: ?

Using the `includeOther` and `prefixes` options

$('#demoFive').listnav({
    includeOther: true,
    prefixes: ['a', 'The Complete Works of']
});

Use the includeOther option to show a [...] navigation item for access to list items that start with something other than A-Z and 0-9 (such as A and U). If you'd like something like "The Valley News" or "The Willows Journal" to appear under V and W as well as under T, supply an array of prefixes using the prefixes option.

You can also ignore multi word prefixes to titles with prefixes (EX: "J" & "S")

Note: prefixes will not iterate the "ALL" count twice.

Specify a `filterSelector` and removing links with `removeDisabled`

$('#demoSix').listnav({
    filterSelector: '.last-name',
    includeNums: false,
    removeDisabled: true,
    allText: 'Complete Cast of Star Trek TNG'
});

Below you'll find a list of the Star Trek TNG Cast "generated" by a CMS. While you wanted to filter by last name it generated the first name fields first...

using filterSelector you can specify a css selector for your navigation to filter by! You can also remove letters that have no content by setting removeDisabled: true

In this demo, each LI contains a hidden div with class="last-name"
So setting filterSelector: '.last-name' lets us filter the list using that CSS selector.

NOTE: filterSelector will accept any valid CSS selector.

You can also set allText to a string to override the default text of "All."

Beverly Crusher

Crusher

Rank: Commander

Date of Birth: Oct. 13, 2324

Place of Birth: Copernicus City, Luna
Wesley Crusher

Crusher

Rank: Ensign

Date of Birth: July 29, 2349

Place of Birth: Earth
Data

Data

Rank: Lieutenant Commander

Date of Birth: Feb. 2, 2338

Place of Birth: Omicron Theta science colony
Geordi La Forge

La Forge

Rank: Commander

Date of Birth: Feb. 16, 2335

Place of Birth: African Confederation, Earth
Jean Luc Picard

Picard

Rank: Captain

Date of Birth: July 13, 2305

Place of Birth: Labarre, France, Earth
William Riker

Riker

Rank: Captain

Date of Birth: August 19, 2335

Place of Birth: Valdez, Alaska, Earth
Deanna Troi

Troi

Rank: Commander

Date of Birth: March 29, 2336 (Terran equivalent)

Place of Birth: Near Lake El-Nar, Betazed
Worf

Worf

Rank: Lieutenant Commander

Date of Birth: December 9, 2340 (Terran equivalent)

Place of Birth: Qo'noS, Klingon Empire

The default configuration

Override defaults and binding to multiple lists

Style your lists however you want!

Using cookieName to save last click and utilizing an onClick callback

Using the includeOther and prefixes options

Specify a filterSelector and removing links with removeDisabled

Using `cookieName` to save last click and utilizing an `onClick` callback

Using the `includeOther` and `prefixes` options

Specify a `filterSelector` and removing links with `removeDisabled`