jquery-alphaindex
https://github.com/idlesign/jquery-alphaindex
Description
jQuery plugin to create alphabetical indexes for your lists.
An alphabetical index may help your users to navigate through a long list of items.
Demo
- Demo page is available in sources: demo/demo.html.
- Hosted demo: https://idlesign.github.io/jquery-alphaindex/demo/demo.html
Usage
-
Include
jQuery
. -
Include
jquery.alphaindex.js
orjquery.alphaindex.min.js
. -
Make a list:
<ul id="my-list"> <li>Joker James</li> <li>Anderson Ann</li> <li>Johnson John</li> </ul>
- Initialize an index:
var myIndex = $('#my-list').makeAlphaIndex(), $indexBar = myIndex.alphaIndexBar; // bar object, if you need it myIndex.alphaIndexToggle('a'); // toggle A indexed myIndex.alphaIndexToggle(true); // show all myIndex.alphaIndexToggle(false); // hide all myIndex.alphaIndexToggle(); // toggle all
Options
- showItemsCount - Show number of items over each letter in index bar. Default: true.
- activateFirstIndex - Show list item belonging to the first letter in index bar after load. Default: true.
Styling
- List is marked with
.alpha-index-list
. - Index bar is marked with
.alpha-index-bar
. - Index bar current item is marked with
.current
.