Author: | elliottprogrammer |
---|---|
Views Total: | 3,494 views |
Official Page: | Go to website |
Last Update: | February 18, 2020 |
License: | MIT |
Preview:

Description:
alphaListNav.js is the vanilla JS version of the listnav jQuery plugin that dynamically generates alphabetical navigation links to filter an HTML list alphabetically.
How to use it:
Load the stylesheet alphaListNav.css
in the header.
<link rel="stylesheet" href="alphaListNav.css">
Load the JavaScript alphaListNav.js
right before the </body>
tag.
<script src="alphaListNav.js"></script>
Initialize the alphaListNav.js library on your list. Done.
<ul id="list-nav" class="list-nav"> <li class="item-class"><a href="">bsarokee</a></li> <li class="item-class"><a href="">Agency</a></li> <li class="item-class"><a href="">Alberton</a></li> <li class="item-class"><a href="">Alder</a></li> ... </ul>
const cityList = new AlphaListNav('list-nav');
Set the initial letter. Default: ‘A’.
const cityList = new AlphaListNav('list-nav',{ initLetter: 'B' });
Determine whether to show all list items on init. Default: false.
const cityList = new AlphaListNav('list-nav',{ includeAll: true });
Full configuration options with default values.
const cityList = new AlphaListNav('list-nav',{ initHidden: false, initHiddenText: 'Tap a letter above to view matching items', initLetter: 'A', includeAll: true, allText: 'All', noMatchText: 'No matching entries', includeNums: true, concatenateNums: true, includeOther: false, flagDisabled: true, removeDisabled: false, prefixes: [], filterSelector: '', });
Changelog:
02/18/2020
- allow for multiple instances
v0.7.1 (02/16/2020)
- improve letter-count positioning
v0.7.0 (02/03/2020)
- added additional options
08/07/2019
- v0.0.3