TOC - Automatically Generate Tables of Contents
| File Size: | 76.3 KB |
|---|---|
| Views Total: | 1414 |
| Last Update: | |
| Publish Date: | |
| Official Website: | Go to website |
| License: | MIT |
TOC is a completely customizable jQuery plugin that allows you to generate a table of contents for your page. It is highly customizable and is able to automatically highlight a current section of the document.
How to use it:
1. Include jQuery Library and toc.js
<script src="jquery.js"></script> <script src="toc.js"></script>
2. Call the plugin
<script>
$('.toc').toc({
});
</script>
3. Markup
<div class="toc"> </div> <h1>...</h1> ..... <h2>...</h2> ...
4. Options
$('#toc').toc({
'selectors': 'h1,h2,h3', //elements to use as headings
'container': 'body', //element to find all selectors in
'smoothScrolling': true, //enable or disable smooth scrolling on click
'prefix': 'toc', //prefix for anchor tags and class names
'onHighlight': function(el) {}, //called when a new section is highlighted
'highlightOnScroll': true, //add class to heading that is currently in focus
'highlightOffset': 100, //offset to trigger the next headline
'anchorName': function(i, heading, prefix) { //custom function for anchor name
return prefix+i;
},
'headerText': function(i, heading, $heading) { //custom function building the header-item text
return $heading.text();
},
'itemClass': function(i, heading, $heading, prefix) { // custom function for item class
return $heading[0].tagName.toLowerCase();
}
});
This awesome jQuery plugin is developed by unknown. For more Advanced Usages, please check the demo page or visit the official website.











