タブ UI 生成プラグイン exTAB.js を機能拡張しました

exTAB.js は、見出し要素ベースなタブ UI を生成する jQuery プラグインです。
前回のエントリ（アウトラインの付いたタブ UI の CSS の記述方法を調べてみた - Cyokodog::Diary）で調べたタブデザインを簡単に適用できるようにした他、以下のような機能拡張を行いました。

実行方法の簡素化
パラメータによる各種スタイルの設定
見出し要素(h1 - h6)以外にも、DL、UL、任意の要素でタブ UI の生成が可能
Ajax によるパネル内コンテンツの取得と表示

実行方法の簡素化

以前の仕様では、「タブ化する要素」「タブの挿入先基準位置をもつ要素」の２つを指定する必要がありましたが、「タブ化する要素」のみの指定で動作するようにしました。タブの挿入先はデフォルトではパネル要素の上になります。

$('h3').exTAB();

パラメータを指定することで任意の場所にタブを挿入することもできます。以下の例ではアウトラインの表示を消したタブ要素を body 要素の直下に挿入することで、グローバルナビゲーションのようにみせてます。

$('h3').exTAB({
    border : false,
    insertTo : 'body',
    insertMethod : 'prepend'
});

Demo

パラメータによるスタイル設定

以下のサンプルページを使って試していきます。

Demo

まずデフォルトで適用されるスタイルは、アウトラインのみのシンプルなタブになります。背景色は透過（transparent）のままです。

$('h3').exTAB();

Demo

配色する場合は、colors プロパティを指定します。colors.border でアウトラインの色、colors.front でパネルと選択中のタブの背景色、colors.rear で非選択タブの背景色を設定します。

$('h3').exTAB({
    colors : {
        border : '00b0f0',
        rear : '#e0e0e0',
        front:'#f0f0f0'
    }
});

Demo

アウトラインが不要な場合は、border プロパティに false を指定します。

$('h3').exTAB({
    border:false,
    colors : {
        rear : '#d0d0d0',
        front:'#f0f0f0'
    }
});

Demo

タブに立体感をだす場合は、ridge プロパティに true を指定し、colors.border プロパティに上右下左の順でアウトラインの色を指定します。

$('h3').exTAB({
    ridge : true,
    colors : {
        border:'#fff #a0a0a0 #a0a0a0 #fff',
        rear : '#d8d8d8',
        front:'#e0e0e0'
    }
});

Demo

タブの配色をダーク系にする場合は、タブのテキストが隠れないように tabText , tabActive パラメータでテキストカラーを調整します。

$('h3').exTAB({
    ridge : true,
    colors : {
        tabText : '#a0a0a0',
        tabActive : '#fff',
        border:'#606060 #202020 #202020 #606060',
        rear : '#383838',
        front:'#404040'
    }
});

Demo

width , height パラメータを指定することでパネルのサイズを設定できます。パネル内のコンテンツが指定サイズを超えてる場合は、スクロールバーが表示されます。tabCSS、tabGroupCSS、panelCSS パラメータに jQuery の css() メソッド相当の値を指定すると、各要素のスタイルを上書きすることができます。例えばパネルにグラデーションをかけたい場合は以下のように書きます。(グラデーションの値の取得方法はこちらをご覧ください)

$('h3').exTAB({
    ridge : true,
    height:300,
    panelCSS : {
        filter:'progid:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr=#404040,EndColorStr=#606060)',
        'background-image':'url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAEsCAYAAAACUNnVAAAAhUlEQVQ4jZXEWwJFIBQFUEMTvYtEiQrzH8W9U9hnfaxhHMffgMYYIzZNE948z8Q453hCCDwpJTGlFJ7WmpgxBs9ai+ecI+a9x1uWhdi6rnghBLxt24jFGPH2fcc7joNYSgkv50zsPE+8UgredV3E7vvGq7USa63h9d7xnuch9r4v3vd9cH9iskJW+Eh9rgAAAABJRU5ErkJggg==")',
        'background-repeat':'repeat-x',
        'background-color':'#606060'
    },
    colors : {
        tabText : '#a0a0a0',
        tabActive : '#fff',
        border:'#606060 #202020 #202020 #606060',
        rear : '#383838',
        front:'#404040'
    }
});

Demo

その他のパラメータとしては以下のものがあります。

tabAlign: left , center , right で、タブの配置位置を指定できます。
event: タブの切替を行うイベントを指定できます。デフォルトは click。
className: タブレイアウト構造のもととなるクラス名を指定します。デフォルトは ex-tab。extab.css で定義されてるスタイルを適用しない場合は、ex-tab 以外の値を指定します。

DL 要素によるタブ

DL 要素に対し、exTAB() メソッドを実行した場合は、DT がタブ、DD がパネルになります。

$('dl.tab').exTAB({
    ridge : true,
    colors : {
        border:'#fff #a0a0a0 #a0a0a0 #fff',
        rear : '#d8d8d8',
        front:'#e0e0e0'
    }
});

Demo

Ajax によるパネル内コンテンツの取得と表示

UL > LI > A タグの href プロパティを設定し、UL 要素にexTAB メソッドを実行するとパネル内ドキュメントを動的に取得するタブ UI が生成されます。

HTML

<ul class="tab">
    <li><a href="ie.html">IE</a></li>
    <li><a href="firefox.html">Firefox</a></li>
    <li><a href="safari.html">Safari</a></li>
    <li><a href="chrome.html">Chrome</a></li>
</ul>

JavaScript

$('ul.tab').exTAB({
    ridge : true,
    colors : {
        border:'#fff #a0a0a0 #a0a0a0 #fff',
        rear : '#d8d8d8',
        front:'#e0e0e0'
    }
});

Demo

ダウンロード

こちらからどうぞ