Webページのナビゲーションを自動生成する軽量なjQueryプラグイン・jQuery Tocible

この記事は年以上前に書かれたもので、内容が古かったり、セキュリティ上の問題等の理由でリンクが解除されている可能性があります。

ページの見出しを取得して、サイドにナビゲーションを生成する、というスクリプトのご紹介。jQueryに依存しています。

いわゆる目次のリンクを生成する、というスクリプトです。ドキュメントページなんかに良さそうです。

jQuery Tocible

動作サンプルです。

 <script src="http:////ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
  <script src="jquery.tocible.js"></script>

コアとプラグインを読み込みます。

$('#foo').tocible({
      heading: 'h2', //ナビゲーションに組むエレメント
      subheading: 'h3', //ナビゲーションに組むエレメント
      navigation: 'nav', //ナビゲーションを生成する場所
      title: '', //ナビゲーションのタイトル。目次、とか
      hash: false, //ハッシュの有無
      offset: 50, //オフセット
      speed: 800 //スクロールのスピード
      collapsible: true //小見出しをレストとして生成するかどうか
  });

セッティングして完了です。

前にも似たようなスクリプトをご紹介しましたが、今回のとは用途が異なるのでメモとしてかきました。詳細は以下にて。