Get Started
First download the alphaListNav.min.js and alphaListNav.min.css files from the dist/ directory in the alphaListNav GitHub repository.
Load the alphaListNav.min.css stylesheet file in the <head> section of your page. (Or use the non-minified version, alphaListNav.css)
<link rel="stylesheet" href="alphaListNav.min.css">
Load the alphaListNav.min.js JavaScript file right before the ending </body> tag. (Or use the non-minified version, alphaListNav.js )
<script src="alphaListNav.min.js"></script>
Add/create the HTML of your list. Give in an id attribute.
<ul id="myList">
<li>Apples</li>
<li>Blueberries</li>
<li>Carrots</li>
<li>Eggplant</li>
</ul>
Initialize the AlphaListNav library on your list by passing it the id of your list.
<script>
new AlphaListNav('myList');
</script>
Or to customize the behavior of AlphaListNav by overriding the various options, like so: (list of all the options below).
<script>
new AlphaListNav('myList', {
initLetter: 'A',
includeAll: false,
includeNums: false,
removeDisabled: true
});
</script>
Configuration
The following are all the AlphaListNav options and their default values.
| Options | Description | Default |
|---|---|---|
| initHidden | Hide all the list items initially, until you click a letter. | true |
| initHiddenText | Message to display to users when the initHidden = true. (string or boolean false for no text shown at all). | "Tap a letter above to view matching items" |
| initLetter | Filter the list to a specific letter on init ('a'-'z', '-' for [numbers 0-9], '_' for [other], '*' for [All]). | "" |
| includeAll | Include the "ALL" button. | true |
| allText | set custom text for the ALL button. | "All" |
| includeNums | Include numbers '0-9' to filter by. | true |
| concatenateNums | Concatenate numbers 0 thu 9 into one button [0 - 9] | true |
| includeOther | Include a '...' button to filter non-english characters by. | false |
| removeDisabled | Remove empty navigation letters. | false |
| flagDisabled | Make empty navigation letters disabled and greyed out. | true |
| showLetterHeadings | Show the letter heading above each list. | true |
| letterHeadingTag | The HTML heading tag used for the letter headings (ie. - 'h1', 'h2', 'h3', etc.) | "h3" |
| showCounts | Show the number of list items that match that letter above the mouse. | true |
| filterSelector | Set the filter to a CSS selector rather than the first text letter for each item. | "" |
| prefixes | An array of prefixes to ignore, ie ['the', 'a', 'my'] (array of strings and/or RegEx's). | [] |
Example Demos
Default Configuration:
Here is the default configuration with no options passed in.
const myListElem = document.getElementById('demoList1');
new AlphaListNav(myListElem);
- 6 Blueberries
- 3 ripe Tomatoes
- 2 Cloves Garlic
- Alfalfa Sprouts
- Apple
- Apricot
- Artichoke
- Asian Pear
- Asparagus
- Atemoya
- Avocado
- Bamboo Shoots
- Banana
- Bean Sprouts
- Beans
- Beets
- Belgian Endive
- Bell Peppers
- Bitter Melon
- Blackberries
- Blueberries
- Bok Choy
- Boniato
- Boysenberries
- Broccoflower
- Broccoli
- Brussels Sprouts
- Cabbage
- Cactus Pear
- Cantaloupe
- Carambola
- Carrots
- Casaba Melon
- Cauliflower
- Celery
- Chayote
- Cherimoya
- Cherries
- Coconuts
- Collard Greens
- Corn
- Cranberries
- Cucumber
- Dates
- Dried Plums
- Eggplant
- Endive
- Escarole
- Feijoa
- Fennel
- Figs
- Garlic
- Gooseberries
- Grapefruit
- Grapes
- Green Beans
- Green Onions
- Greens
- Guava
- Hominy
- Honeydew Melon
- Horned Melon
- Iceberg Lettuce
- Jerusalem Artichoke
- Jicama
- Kale
- Kiwifruit
- Kohlrabi
- Kumquat
- Leeks
- Lemons
- Lettuce
- Lima Beans
- Limes
- Longan
- Loquat
- Lychee
- Madarins
- Malanga
- Mandarin Oranges
- Mangos
- Mulberries
- Mushrooms
- Napa
- Nectarines
- Okra
- Onion
- Oranges
- Papayas
- Parsnip
- Passion Fruit
- Peaches
- Pears
- Peas
- Peppers
- Persimmons
- Pineapple
- Plantains
- Plums
- Pomegranate
- Potatoes
- Prickly Pear
- Prunes
- Pummelo
- Pumpkin
- Quince
- Radicchio
- Radishes
- Raisins
- Raspberries
- Red Cabbage
- Rhubarb
- Romaine Lettuce
- Rutabaga
- Shallots
- Snow Peas
- Spinach
- Sprouts
- Squash
- Strawberries
- String Beans
- Sweet Potato
- Tangelo
- Tangerines
- Tomatillo
- Tomato
- Turnip
- Ugli Fruit
- Water Chestnuts
- Watercress
- Watermelon
- Waxed Beans
- Yams
- Yellow Squash
- Yuca/Cassava
- Zucchini Squash
- Äpfel
- Über alle
Initialize the starting letter with initLetter and using includeAll, includeNums, and includeOther:
In this demo, we're configuring the 4 most
common options:
1. Start the list with all "A" letters showing
initially (initLetter: 'a').
2. we're removing the ability to show All list
items by removing the "All" button (includeAll: false).
3. We're allowing the list to show items that
start with characters that aren't in the english
alphebet by adding the "..." button (includeOther: true).
4. We're removing the ability to show list items
that start with numbers by removing the "0-9"
button (includeNums: false)
const myListElem2 = document.getElementById('demoList2');
new AlphaListNav(myListElem2, {
initLetter: 'a',
includeAll: false,
includeOther: true,
includeNums: false,
});
- 6 Blueberries
- 3 ripe Tomatoes
- 2 Cloves Garlic
- Alfalfa Sprouts
- Apple
- Apricot
- Artichoke
- Asian Pear
- Asparagus
- Atemoya
- Avocado
- Bamboo Shoots
- Banana
- Bean Sprouts
- Beans
- Beets
- Belgian Endive
- Bell Peppers
- Bitter Melon
- Blackberries
- Blueberries
- Bok Choy
- Boniato
- Boysenberries
- Broccoflower
- Broccoli
- Brussels Sprouts
- Cabbage
- Cactus Pear
- Cantaloupe
- Carambola
- Carrots
- Casaba Melon
- Cauliflower
- Celery
- Chayote
- Cherimoya
- Cherries
- Coconuts
- Collard Greens
- Corn
- Cranberries
- Cucumber
- Dates
- Dried Plums
- Eggplant
- Endive
- Escarole
- Feijoa
- Fennel
- Figs
- Garlic
- Gooseberries
- Grapefruit
- Grapes
- Green Beans
- Green Onions
- Greens
- Guava
- Hominy
- Honeydew Melon
- Horned Melon
- Iceberg Lettuce
- Jerusalem Artichoke
- Jicama
- Kale
- Kiwifruit
- Kohlrabi
- Kumquat
- Leeks
- Lemons
- Lettuce
- Lima Beans
- Limes
- Longan
- Loquat
- Lychee
- Madarins
- Malanga
- Mandarin Oranges
- Mangos
- Mulberries
- Mushrooms
- Napa
- Nectarines
- Okra
- Onion
- Oranges
- Papayas
- Parsnip
- Passion Fruit
- Peaches
- Pears
- Peas
- Peppers
- Persimmons
- Pineapple
- Plantains
- Plums
- Pomegranate
- Potatoes
- Prickly Pear
- Prunes
- Pummelo
- Pumpkin
- Quince
- Radicchio
- Radishes
- Raisins
- Raspberries
- Red Cabbage
- Rhubarb
- Romaine Lettuce
- Rutabaga
- Shallots
- Snow Peas
- Spinach
- Sprouts
- Squash
- Strawberries
- String Beans
- Sweet Potato
- Tangelo
- Tangerines
- Tomatillo
- Tomato
- Turnip
- Ugli Fruit
- Water Chestnuts
- Watercress
- Watermelon
- Waxed Beans
- Yams
- Yellow Squash
- Yuca/Cassava
- Zucchini Squash
- Äpfel
- Über alle
const myListElem3 = document.getElementById('demoList3');
new AlphaListNav(myListElem3, {
initHidden: false,
prefixes: ['The'],
removeDisabled: true,
});
- No Doubt
- Avenged Sevenfold
- Grateful Dead
- Kings of Leon
- Alice in Chains
- The Script
- Five Finger Death Punch
- Muse
- Rage Against the Machine
- The Fray
- Steely Dan
- Evanescence
- The Cure
- Huey Lewis & the News
- Scorpions
- INXS
- Three Days Grace
- Slipknot
- Styx
- Goo Goo Dolls
- The Offspring
- Disturbed
- The Kinks
- Korn
- Limp Bizkit
- Dave Matthews Band
- Steve Miller Band
- Mumford & Sons
- Arctic Monkeys
- Creed
- System of a Down
- The Smashing Pumpkins
- Matchbox Twenty
- Alice Cooper
- REO Speedwagon
- The Cars
- Toto
- Deep Purple
- 3 Doors Down
- Oasis
- Iron Maiden
- The Cranberries
- Paramore
- The Killers
- Depeche Mode
- The Doobie Brothers
- Boston
- Radiohead
- Marilyn Manson
- Bob Seger & the Silver Bullet Band
- Dire Straits
- Blink-182
- Panic! at the Disco
- Electric Light Orchestra
- Gorillaz
- ZZ Top
- Rush
- Kiss
- R.E.M.
- Genesis
- OneRepublic
- ABBA
- Tom Petty and the Heartbreakers
- The Police
- Fall Out Boy
- Heart
- Foo Fighters
- Def Leppard
- Nickelback
- Black Sabbath
- Foreigner
- Pearl Jam
- Green Day
- Lynyrd Skynyrd
- The Doors
- Coldplay
- The Beach Boys
- The Who
- Nirvana
- Chicago
- Santana
- Creedence Clearwater Revival
- Journey
- Van Halen
- U2
- Bon Jovi
- Maroon 5
- Red Hot Chili Peppers
- Linkin Park
- Fleetwood Mac
- Aerosmith
- Guns N' Roses
- Metallica
- Eagles
- AC/DC
- The Rolling Stones
- Pink Floyd
- Queen
- Led Zeppelin
- The Beatles
More demos coming soon! ...
Issues
If you run into an issue or find a bug with alphaListNav.js, Please let me know!
please sumbit all issues to the AlphaListNav GitHub Repo. Click on the Issues tab or click here to open an issue.
Contributers welcome.