https://github.com/idlesign/jquery-alphaindex

jQuery plugin to create alphabetical indexes for your lists
https://github.com/idlesign/jquery-alphaindex

alphabet alphabetical-indexes demo index jquery-alphaindex jquery-plugin letters widgets

Last synced: 2 months ago
JSON representation

jQuery plugin to create alphabetical indexes for your lists

• Host: GitHub
• URL: https://github.com/idlesign/jquery-alphaindex
• Owner: idlesign
• License: bsd-3-clause
• Created: 2017-01-14T09:32:53.000Z (almost 8 years ago)
• Default Branch: master
• Last Pushed: 2017-02-25T02:58:13.000Z (almost 8 years ago)
• Last Synced: 2024-10-19T09:06:07.194Z (2 months ago)
• Topics: alphabet, alphabetical-indexes, demo, index, jquery-alphaindex, jquery-plugin, letters, widgets
• Language: JavaScript
• Homepage: https://github.com/idlesign/jquery-alphaindex
• Size: 16.6 KB
• Stars: 12
• Watchers: 3
• Forks: 5
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG
  • License: LICENSE

Awesome Lists containing this project

README

        
jquery-alphaindex

=================

https://github.com/idlesign/jquery-alphaindex

[![npm](https://nodei.co/npm/jquery-alphaindex.png?downloads=true&stars=true)](https://nodei.co/npm/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

-----

1. Include ``jQuery``.

2. Include ``jquery.alphaindex.js`` or ``jquery.alphaindex.min.js``.

3. Make a list:

```html

    


        
Joker James

        
Anderson Ann

        
Johnson John

    

```


4. Initialize an index:

```javascript

    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``.