見出し要素ベースなタブＵＩを生成する jQuery.exTAB.js

jQuery

更新履歴

2009-11-20
リファレンスサイト(GAE)変更中のため只今参照できません。機能拡張版の下記エントリをご覧ください。

見出し要素より目次を自動生成する jQuery プラグイン jQuery.exTOC.js がこちらのサイトで紹介されてました。

サンプルページのソースを確認すると jQuery UI Tabs が併用されてるため、h2 要素とその対象コンテンツが div 要素でグルーピングされていました。

<h1>ページタイトル</h1>
<div id="tab-1">
    <h2>セクション１のタイトル</h2>
    <p>内容</p>
</div>
<div id="tab-2">
    <h2>セクション２のタイトル</h2>
    <p>内容</p>
</div>
<div id="tab-3">
    <h2>セクション３のタイトル</h2>
    <p>内容</p>
</div>

一般的なタブＵＩ系のプラグインの場合は、各タブの対となるコンテンツ領域を指定する必要があるので、上記のように見出しとコンテンツをグルーピングする div が必要になりますが、マークアップ上冗長な印象を受けます。

jQuery.exTOC.js では exHeadEach という内部プラグインを使用して、暗黙的に解釈できる見出し要素とコンテンツのグルーピングを抽出して目次コンテンツを生成しています。これと同様の手法でグルーピング div を必要としない タブ UI を生成するプラグインを作ってみました。


Demo

機能紹介

exTAB は見出し要素単位で切替わるタブＵＩを生成する jQuery プラグインです。縦長の１ページを擬似的に複数ページに分割し、タブのクリックでページ切替を行うＵＩが容易に実現できます。

シンプルな HTML

タブＵＩ系のライブラリにありがちなタブコンテンツを切り分けるための div 要素の記述は要りません。見出し要素を使った普通の HTML を記述するのみです。

<!DOCTYPE HTML>
<html>
    <body>
        <h1>jQuery Plugins @ Cyokodog</h1>
        <h2>exTAB :: demo</h2>

        <h3>Overviw</h3>
        <p>...</p>

        <h4>Usage</h4>

        <h5>Basic</h5>
        <p>...</p>

        <h5>Customize</h5>
        <p>...</p>
    </body>
</html>
タブＵＩの自動生成

exTAB メソッドを実行するとタブＵＩが自動的に生成されます。

$('h2').exTAB({
    insertMethod : 'after',
    tabHead : 3
});

上の例では h3 要素単位 （ tabHead : 3 ） で切り替わるタブＵＩを h2 要素 （ $('h2) ） の下に挿入 （ insertMethod : 'after' ） してます。

Demo

CSS による柔軟なデザイン

タブのデザインは適用するサイトのデザインと調和させたいところです。 exTAB が標準で用意する CSS 定義は、コーダーがデザイン中心の CSS を定義しやすいよう、配置定義を中心としたシンプルなものにとどめています。

CSS に配色の定義を追記することで見た目をタブようにすることができます。

Demo

exTOC との連携

見出し要素より目次コンテンツを自動生成する jQuery プラグイン exTOC との連携が容易にできます。タブの切り替えに連動して目次の表示内容も自動的に切り替わります。

Demo

GAE と GitHub に公開しました

他にもイベント割り当て等のパラメータ指定ができます。リファレンスサイトを GAE に公開しましたので詳しい使い方はこちらを参考にしてください。
リファレンスサイト(GAE)変更中のため只今参照できません。


ソースは GitHub に公開しました。デモページも含めた上記のリファレンスサイトのコンテンツ一式が一括でダウンロードできます。

今後公開するプラグインはこのパターンを適用してこうかと思ってます。ちなみにリファレンスサイトの方は Mayaa のレイアウト機能（前回記事）を使用してるので、GitHub から一括ダウンロードすると拡張子が .mayaa のファイルが混じってますが不要なファイルですので無視してください。