Twitter Bootsrap2.0でタブナビゲーションを使う

CSS&JavaScriprフレームワークのTwitter Bootsrap2.0がリリースされ、各所で注目を浴びているようですが、早速、試してみました。1.4からの変更点なども多く、まだ悪戦苦闘していますが、タブナビゲーションで躓いたので、備忘録も兼ねて、記事を書こうと思います。

1.まずは下準備
公式サイトへ行き、「Download Bootstrap」をクリックしてダウンロード。
jQueryも使用するので、こちらも最新版をダウンロードしておく。
解凍して、任意のディレクトリへ配置。

2.HTMLで各種ファイルを読み込む
必要なファイルはCSS、JSファイル。bootstrap.min.js(bootstrap.js)には、全てのJS機能が入っている。bootstrap.jsだと47KBなので、そこそこボリュームがある。

<!-- CSSファイル -->
<link href="bootstrap/css/bootstrap.css" rel="stylesheet">

<!-- jQueryは同梱されていないので別途ダウンロードし、任意のディレクトリへ配置し、読み込み -->
<!-- 必ずjqueryから先に読み込むこと -->
<script src="bootstrap/js/jquery-1.7.1.min.js"></script>
<script src="bootstrap/js/bootstrap.min.js"></script>

3.HTMLコーディングをする
必ずHTML5で記述すること。そうしないと、IEで動作しない。

• タブナビゲーションのリストに「nav nav-tabs」を記述。
  • nav-tabsだけではダメ。
• aタグには必ず data-toggle="tab" を記述。リンク先はIDのアンカーを指定。
• コンテンツ部分はtab-contentがtab-paneを包括する形で記述すること。各コンテンツにIDを割り当てる。

<ul class="nav nav-tabs">
  <li><a href="#home" data-toggle="tab">Home</a></li>
  <li><a href="#profile" data-toggle="tab">Profile</a></li>
</ul>
<div class="tab-content">
  <div class="tab-pane" id="home">
    ホーム
  </div>
  <div class="tab-pane" id="profile">
    プロフィール
  </div>
</div>

4.最後の仕上げはJavaScript。

• 下のコードはデフォルトタブの指定方法。数字はインデックス番号。0が一番目のタブなので注意。

<script type="text/javascript">
	$(".nav-tabs a:eq(0)").tab("show");
</script>

とりあえず、今回はこんなところで。