小粋空間  -  a cheap joke and a play on words site

jQueryで目次を自動生成する「tocプラグイン」

jQueryで目次を自動生成する「tocプラグイン」を公開します。

１．概要

プラグインを利用することでページ内の見出し要素を抽出し、指定したid属性値の要素に目次を表示します。

たとえば次のようなコンテンツがあるとします。

<h3>タイトル1</h3>
<div>本文</div>
  <h4>タイトル1-1</h4>
  <div>本文</div>
  <h4>タイトル1-2</h4>
  <div>本文</div>
    <h5>タイトル1-2-1</h5>
    <div>本文</div>
<h3>タイトル2</h3>
<div>本文</div>
  <h4>タイトル2-1</h4>
  <div>本文</div>
  <h4>タイトル2-2</h4>
  <div>本文</div>
<h3>タイトル3</h3>
<div>本文</div>
  <h4>タイトル3-1</h4>
  <div>本文</div>
  <h4>タイトル3-2</h4>
  <div>本文</div>

ここから次のような目次を生成します。

目次をクリックすれば、ページ内の該当位置に遷移します。

同じようなプラグインは既出でいろいろあるようですが、とりあえず作ってみました。

２．プラグインのダウンロード

以下のリンクからプラグインをダウンロードして、ファイル名を「jquery.toc.js」にリネームしてください。

変更履歴

2014.08.29 v0.0.1 初版
2014.09.03 v0.0.2 マークアップが誤っている不具合を修正

jquery.toc_0.0.2.js

以下、設定方法です。

３．HTML

HTMLに目次を表示させるための、id属性値つきの任意の要素を、目次を表示させたい位置に設定します。

<div id="toc"></div>

id属性値のデフォルトは「toc」です。tocは"目次"の英訳「Table Of Contents」の略です。

４．JavaScript

JavaScriptを次のように記述します。

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="jquery.toc.js"></script>
<script>
$(function(){
    $("body").toc();
});
</script>

オプションとして以下を用意しています。

• startLevel：開始する見出し要素。デフォルトは「h3」
• listType：目次のリストタイプで「ul」または「ol」のいずれかを設定。デフォルトは「ul」
• target：目次を表示する要素のid属性値。デフォルトは「toc」

たとえば、以下のように設定します。

$(function(){
    $("body").toc({
        startLevel: 'h2',
        listType: 'ol',
        target: 'foo'
    });
});

５．CSS

CSSについては解説を省略しますので適宜設定してください。

サンプル画像のCSSは次の内容を設定しています。

#toc:before {
  content: "目次";
  padding-left: 8px;
}
#toc {
  backgound:#f9f9f9;
  border: 1px solid #aaa;
  font-size: 95%;
  display: table;
  margin-bottom: 10px;
  padding: 15px;
  width: auto;
}
#toc ol,
#toc ol li {
  margin: 5px 5px 5px 15px;
  padding: 0;
}
#toc a:hover {
  text-decoration: underline;
}

６．参考サイト

参考サイトは下記です。ありがとうございました。

• jQueryで目次と「目次に戻る」を自動生成（プラグイン無し）