https://github.com/NikitaGolovko/jQuery-DataList
jQuery Datalist extension for Bootstrap creates a letter based navigation for your lists.
https://github.com/NikitaGolovko/jQuery-DataList
Last synced: 4 months ago
JSON representation
jQuery Datalist extension for Bootstrap creates a letter based navigation for your lists.
- Host: GitHub
- URL: https://github.com/NikitaGolovko/jQuery-DataList
- Owner: NikitaGolovko
- Created: 2014-05-20T02:40:45.000Z (almost 11 years ago)
- Default Branch: master
- Last Pushed: 2014-06-10T02:28:39.000Z (almost 11 years ago)
- Last Synced: 2024-08-13T07:03:24.343Z (8 months ago)
- Language: JavaScript
- Homepage:
- Size: 203 KB
- Stars: 7
- Watchers: 2
- Forks: 4
- Open Issues: 5
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
- jimsghstars - NikitaGolovko/jQuery-DataList - jQuery Datalist extension for Bootstrap creates a letter based navigation for your lists. (JavaScript)
README
# jQuery DataList
> jQuery plug-in inspired by ListNav plugin originally created and maintained by [Eric Steinborn](https://github.com/esteinborn/jquery-listnav) will add a slick "letter-based" navigation bar to all of your lists with the proper Bootstrap markup. Click a letter to quickly filter the list to show items that match that letter. The next release of this extension will also add a search functionality that you can bind to your controls.
## Sample
To understand better what this extension accomplishes - check out this [sample page](http://nikitagolovko.github.io/jQuery-DataList/Example.html)!
## Manual Install
#### Insert into <Head>:
<link rel="stylesheet" href="datalist.css">
#### Code up your list:
<ul id="myList">...</ul>
#### Append the search control:
#### Insert before </body>:
<script src="jQuery-datalist.js"></script>
<script>
$("#myList").datalist();
</script>
## Options
$("myList").listnav({
initLetter: '', // filter the list to a specific letter on init ('a'-'z', '-' [numbers 0-9], '_' [other])
optionAll: true, // Include the ALL button
optionOther: false, // Include a '...' option to filter special charachters by
optionNums: true, // Include a '0-9' option to filter by
removeDisabled: false, // Remove the disabled elements from navigation items. Does not apply to artificially added elements (optionAll/optionNums/optionOther)
notFoundText: 'No matching entries', // set custom text for nav items with no content to show
searchControlName: '', // Set the search control ID to bind the search functionality to.
navigationClass: 'btn-default' // Set the navigation control classes. EIther default bootstrap classes: btn-default, btn-primary or your own classes
});