ITエンジニア/デザイナ向けにオープンソースを毎日紹介

お。これはプロジェクトサイトのヘルプや説明ページに使えそうですね。

BootstrapをベースにWebサイトを構築するメリットとして、多彩なプラグイン/ウィジェットの存在があります。こんなこと実現できるかな、と思って調べてみれば大抵そういったソフトウェアが存在するのが強みです。

例えばメインコンテンツの左側に見出しを目次として並べたい、そう思ったならばTocifyを使ってみましょう。Bootstrap + jQueryで格好いい目次表示を行ってくれます。

使い方としてはまずスタイルシートとJavaScriptを読み込みます。

<link type="text/css" rel="stylesheet" href="jquery.tocify.css" />
<link type="text/css" rel="stylesheet" href="bootstrap.css" />
<script src="jquery-1.7.2.min.js"></script>
<script src="jquery-ui-1.9.1.custom.min.js"></script>
<script src="jquery.tocify.min.js""></script>

公式サイトで紹介されているjQueryのバージョンがやけに低いですが、恐らく新しいものでも大丈夫なはず(1.7.2以上で動作します)。

後は目次を表示したい場所を用意してJavaScriptを実行するだけです。

<div id="toc"></div>
$(function() {
  //Calls the tocify method on your HTML div.
  $("#toc").tocify();
});

これだけでメインのコンテンツを使って格好いい目次が生成されます。

左側が目次になります。
左側が目次になります。

マウスでスクロールすると目次のハイライト部分が追従します。
マウスでスクロールすると目次のハイライト部分が追従します。

さらに小見出しがあるとアニメーションして内容が表示されます。
さらに小見出しがあるとアニメーションして内容が表示されます。

別な見出しに移ればまたアニメーションされます。
別な見出しに移ればまたアニメーションされます。

最初はh1のみで、さらにスクロールしていくことで中にあるh2タグの分までリストアップされる仕組みです。デフォルトではh1/h2/h3タグまで対応しています。最初にごちゃっと全ての見出しが表示されないので見通しが良いのが利点です。

オプションは数多く、アニメーションの指定もできるようになっています。サイドバーはスクロールに追従しますので長い文章でも問題ありません。

Bootstrapを使ったコンテンツサイトなどで使ってみると良さそうです。

TocifyはBootstrap用、jQuery/JavaScript製のオープンソース・ソフトウェア(MIT License)です。

Tocify by Greg Franko

gfranko/jquery.tocify.js

 

MOONGIFTの関連記事

コメント

  • DevRel
  • Com2