Author: | elliottprogrammer |
---|---|
Views Total: | 314 |
Official Page: | Go to website |
Last Update: | August 7, 2019 |
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 });
Changelog:
08/07/2019
- v0.0.3