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) 目次のリストの上に表示する見出しのタグを指定する。 |