tocjs

TocJS

A jQuery plug-ins that automatically create a table of contents of the article.

##概要

記事の見出し（h1-6タグ）を元に、自動的に目次を作成します。 対象範囲の選択や連番機能、特定の見出し除外などの機能があります。

インストール

jQueryとtoc.jsを読み込みます。

<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="path/to/toc.js"></script>

使い方

目次を作成したい場所に、この空divを書きます。

<div class="toc"></toc>

目次対象とする記事範囲をdivで囲みます。この囲まれた中の見出しタグが、目次に反映されます。

<div class="toc-src">

  <!-- 対象となる記事のHTML -->
  
</div>

同ページ内にスクリプトを書きます。

<script>
$(function(){
  $('.toc-src').toc();
});
</script>

オプション

<script>
$(function(){
  $('.toc-src').toc(){
    exclude: '.toc-exclude'
    heading: 'h2, h3'
    include: null
    menu: '.toc'
    number: true
    title: 'Table of Contents'
    titleElement: 'h2'
  });
});
</script>

プロパティ	デフォルト値	説明
exclude	'.toc-exclude'	(string) 除外する見出しのクラス名。 CSSのセレクタの記述方法で指定。例）'.toc-exclude, .toc-example'
heading	'h2, h3'	(string) 自動取得する見出しの要素名。h1, h2, h3, h4, h5, h6 の中から、数字の低い順にカンマ区切りで指定する。例）'h2, h3, h4'
include	null	(string)指定したクラス名の見出しのみの目次を作成する時に使う。CSSセレクタの記述方法で指定。例）'.toc-include'
menu	'.toc'	(string) 見出しを出力させる要素のクラス名。CSSセレクタの記述法で指定。
number	true	(bool) 見出しの連番表示。
title	'Table of Contents	(string) 目次のリストの上に表示する見出しのテキスト。'' で見出しなし。 例）'見出し'
titleElement	'h2'	(string) 目次のリストの上に表示する見出しのタグを指定する。