目次を自動生成する jQuery プラグイン作りました。

投稿日時:2014年6月13日 カテゴリー:JavaScript

目次(hx)を自動生成するjQueryプラグインを作ったので公開します。
昨今ブログで目次を付けるのは当たり前になっています。
なので作ってみました。
Google で検索すると結構同一のプラグインあるので、、需要はなさそうです。

デモを見る

ちなみに、スクロール系のプラグインと衝突を避けるため、あえてスクロールを実装しませんでした。
実装できなかったわけではない!!あえてしなかったのだ!!(強調)

ちなみに、動的に生成された目次はWeb上に公開されている多くのスクロールコード「$().click()」では、スクロールしない。スクロールさせる方法は以下に記載しました。

【完全版】 JavaScript で自動生成したページ内リンクでも、スクロールするjQueryコード

免責事項

このプログラムにより発生した、いかなる損害も保証しません。

著作権

著作権フリーです。ご自由にお使いください。

ダウンロード

ダウンロード(mokuzi v1.0.zip)

仕様

 

見出し(hx)を高さの順番に、ul li で入れ子状に表示します。

基本的な html の構文に従えば、正しく表示されます。

後は、お好みで css を設定してやってください。

目次表示例

<ul>
<li>タイトル2
   <ul>
   <li>タイトル3</li>
   </ul>
</li>
<li>タイトル4</li>
<li>タイトル5
   <ul>
   <li>タイトル6
      <ul>
      <li>タイトル7</li>
      </ul>
   </li>
   </ul>
</li>
</ul>

 

設置方法

html のみの編集で設置できます。

JQuery と mokuzi.js を設置

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript" src="./js/mokuzi.js" charset="UTF-8"></script>

 

その後、プラグインを呼び出します。

デフォルト

<script type="text/javascript" />
$(function(){
    $(".mokuzi").mokuzi();
});
</script>

オプション指定

<script type="text/javascript" />
$(function(){
    $(".mokuzi").mokuzi({
     scope:'.wp2',
     start:2,
     end:5
     });
});
</script>

 

後は、目次を表示させるタグを設定します。プラグインの jQuery関数[$()] には目次を表示させるセレクタを指定します。

<div class="mokuzi"></div>

 

オプション

オプション デフォルト 効果
scope ‘body’ 目次を生成する範囲をセレクタで指定します。’.wp2′ を指定した場合は、以下の赤い部分の範囲のみ目次を生成します。<div><h1>タイトル1</h1><div class=”wp2″><h1>タイトル1</h1></div></div>
start 2 目次を生成する hx のスタートを設定します。 2 を指定した場合 h2 から検索します。
end 5 目次を生成する hx の終了範囲を設定します。 4 を指定した場合 h4 まで検索します。start:2,end:5 と指定した場合は h2 ~ h5 の範囲で目次を生成します。 h1 h6 は無視します。

コメントを残す