Johennes / jquery.contentify

jQuery plugin to generate a table of contents

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

jquery.contentify

A jQuery plugin to generate a table of contents

Usage

The below code snippet shows how to create the table of contents in a container with ID toc.

$('#toc').contentify({
  title:            'Table of Contents',
  headingSelectors: ['h1', 'h2', 'h3'],
  scrollDuration:   500
});

The contentify function accepts a settings object with the following properties:

  • title - The heading that will appear on top of the table of contents (default: none / empty string)
  • headingSelectors - An array of selectors that should be used to identify headings. The selector at index i will be used to locate headings on the i-th level (default ['h1', 'h2', 'h3', 'h4', 'h5']).
  • scrollDuration - Duration of the scrolling animation in milliseconds (default: 1000)

The title of the table of contents is wrapped in a <div> with a CSS class of contentify_title. Moreover, the indivual sections are wrapped in <ol> lists with a CSS class of contentify_i where i is the level of the section.

What Doesn't Work Yet

  • Only one single selector can be specified for each level of headings. It would be nice to be able to specify an array of selectors for each level of headings.
  • The CSS class names of the table of contents cannot be customized
  • It is not possible to restrict the area of the document that should be scanned for headings. The whole document will be used to compile the table of contents.

About

jQuery plugin to generate a table of contents

License:MIT License


Languages

Language:JavaScript 100.0%