目次作成プラグインを作ってみた
公開日:
:
最終更新日:2012/06/18
toccreator
かねてから「あったらいいな~」と思っていた目次作成プラグイン(?)を作ったのでameroadに公開してみました。
このブログでも使っているので、よかったら買ってみてください。
TOCCreator
TOCCreatorとは
TOCCreatorはTable of contents creatorの略で、目次を自動で作成するためのjavascriptプラグインです。
できること
・クラス名で範囲を指定して、範囲内の見出しタグをスキャンして目次を作成します。
範囲を指定できるので、レイアウト用途で見出しタグを使用していてもそれらを除外することができます。
・目次から見出しへのアンカーリンク、見出しから目次へのアンカーリンクを追加します。
目次と本文の移動をスムーズにします。
・章番号を自動で採番します。
1-1や2-1-3など章番号を数えて採番します。
見出しを追加しても、表示の度に採番しなおすので、章番号を書きなおす必要がありません。
ex)
1-1 タイトルA
1-2 タイトルB
の間にタイトルCを挿入すると自動で
1-1 タイトルA
1-2 タイトルC
1-3 タイトルB
のようにしてくれます。
このエントリー自体がサンプルになってます。
使い方
1.目次を作りたい場所にid=toc_paneを指定したdivを置きます
2.目次に反映したい見出しを、class=post_contentを指定したdivで囲います
3.body要素がロードされてからtoc_creator.jsを読み込むか、先に読み込んで
bodyがロードされてからTOC.creat()を実行します。
※クラス名やID名はset関数で変更することができます。
以上
必要事項
jqueryが必要です。
バージョン1.7.2で動作確認済みです。
サンプルコード
<!-- 1.目次を作りたい場所にid=toc_paneを指定したdivを置きます --> <div id="toc_pane"> もくじ </div> <!-- 2.目次を作りたい範囲をdivで囲って、class=post_contentを指定します --> <div class="post_content"> <H1>見出し1</H1> <p> 記事本文。<br /> 記事本文。 </p> <H2>見出し2</H2> <H3>見出し3</H3> <H4>見出し4</H4> <H4>見出し4</H4> <H5>見出し5</H5> <H6>見出し6</H6> <H7>見出し7</H7> <H8>見出し8</H8> <H9>見出し5</H9> <H10>見出し5</H10> <H11>見出し5</H11> <H12>見出し5</H12> <H1>見出し1</H1> <p> 記事本文。<br /> 記事本文。 </p> <H2>見出し2</H2> <H3>見出し3</H3> <H3>テスト</H3> </div>
関連記事
記事はありませんでした