123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109 |
- !function($) {
- $.fn.toc = function(options) {
- var self = this;
- var opts = $.extend({}, jQuery.fn.toc.defaults, options);
- var container = $(opts.container);
- var headings = $(opts.selectors, container);
- var headingOffsets = [];
- var activeClassName = opts.prefix+'-active';
- var findScrollableElement = function(els) {
- for (var i = 0, argLength = arguments.length; i < argLength; i++) {
- var el = arguments[i],
- $scrollElement = $(el);
- if ($scrollElement.scrollTop() > 0) {
- return $scrollElement;
- } else {
- $scrollElement.scrollTop(1);
- var isScrollable = $scrollElement.scrollTop() > 0;
- $scrollElement.scrollTop(0);
- if (isScrollable) {
- return $scrollElement;
- }
- }
- }
- return [];
- };
- var scrollable = findScrollableElement(opts.container, 'body', 'html');
- var scrollTo = function(e) {
- if (opts.smoothScrolling) {
- e.preventDefault();
- var elScrollTo = $(e.target).attr('href');
- var $el = $(elScrollTo);
-
- scrollable.animate({ scrollTop: $el.offset().top }, 400, 'swing', function() {
- location.hash = elScrollTo;
- });
- }
- $('li', self).removeClass(activeClassName);
- $(e.target).parent().addClass(activeClassName);
- };
- //highlight on scroll
- var timeout;
- var highlightOnScroll = function(e) {
- if (timeout) {
- clearTimeout(timeout);
- }
- timeout = setTimeout(function() {
- var top = $(window).scrollTop();
- for (var i = 0, c = headingOffsets.length; i < c; i++) {
- if (headingOffsets[i] >= top) {
- $('li', self).removeClass(activeClassName);
- $('li:eq('+(i-1)+')', self).addClass(activeClassName);
- break;
- }
- }
- }, 50);
- };
- if (opts.highlightOnScroll) {
- $(window).bind('scroll', highlightOnScroll);
- highlightOnScroll();
- }
- return this.each(function() {
- //build TOC
- var ul = $('<ul/>');
- headings.each(function(i, heading) {
- var $h = $(heading);
- headingOffsets.push($h.offset().top - opts.highlightOffset);
- //add anchor
- var anchorName = opts.anchorName(i, heading, opts.prefix);
- var anchor = $([]);
- if (!document.getElementById(anchorName)) {
- anchor = $('<span/>').attr('id', opts.anchorName(i, heading, opts.prefix)).insertBefore($h);
- }
- //build TOC item
- var a = $('<a/>')
- .text($h.text())
- .attr('href', '#' + anchorName)
- .bind('click', scrollTo);
- var li = $('<li/>')
- .addClass(opts.prefix+'-'+$h[0].tagName.toLowerCase())
- .append(a);
- ul.append(li);
- });
- var el = $(this);
- el.html(ul);
- });
- };
- jQuery.fn.toc.defaults = {
- container: 'body',
- selectors: 'h1,h2,h3',
- smoothScrolling: true,
- prefix: '',
- highlightOnScroll: true,
- highlightOffset: 100,
- anchorName: function(i, heading, prefix) {
- return prefix+i;
- }
- };
- }(jQuery);
|