自動的に目次を作ってくれるjQueryプラグイン
- exTOC.js 1.0 -
2014/08/03
見出しタグの階層を追って目次 Table of Contents (TOC) を自動的に作ってくれるjQueryスクリプトがある。長い構造的な文章だったり「よくある質問」のような箇条書きの文面では役立ちそうである。
こでは、exTOC.js のサンプルなどを作りながら、使い方の勉強を...exTOC.jsは、
- 目次対象の範囲を指定できる。
- 番号付け、番号付けしなしの指定ができる。
- 番号付けの範囲で指定できる。
- 目次の表示位置を指定できる。
- ページ内移動のスクロールの速さを調節したりエフェクトを指定したりできる。
作者のサイトはクエリ文字列でオプションを切り替えているが、クエリを使わないサンプルをいくつか作ってみた。説明で度々出てくる「基準となる要素」とは表示位置に関することで、内容の階層構造の起点を示すといった意味ではない。サンプルでは <div id="toc" > とした。
サンプル1
- 基準となる要素内の後尾にTOCを追加
- スムーズ移動あり
- 番号付けなし
サンプル2
- 基準となる要素の後ろにTOCを表示
- スムーズ移動なし
- 番号付けあり
サンプル3
- TOCの前に任意のHTMLを追加
- H3〜H4に限定してTOCに表示
- H3の後ろにTOCへのページ内移動リンクを追加(スクロールアップ時のスムージングのためのコード追加)
サンプル4
- TOCを固定（exfixed2.0.2を使用）
- exfixedについてはよく解りません(^^;
各種オプションの詳細については作者のページを見てください。私もよく理解できていないところもあります。
なお、スムーズ スクロールがうまくいかない場面もあったのでjqueryは作者のサイトにある、ver.1.2.6より新しいものを使いました。
jsソース
extoc_1_0.js
exfixed_2_0_2.js