Wiki Navigation

Tab Box

概要

タブボックスを表示します。
タブボックスはタブと対になった表示エリア（以下、「パネル」と表記します）によって構成されます。

利用方法

<head>
  <script src="../src/javascripts/spinelz_lib/prototype.js" type="text/javascript"></script>
  <script src="../src/javascripts/spinelz_lib/scriptaculous.js" type="text/javascript"></script>
  <script src="../src/javascripts/spinelz_lib/spinelz_util.js" type="text/javascript"></script>
  <script src="../src/javascripts/spinelz/tabBox.js" type="text/javascript"></script>
  <link rel="stylesheet" href="../src/stylesheets/spinelz/tabBox.css" type="text/css">
</head>
<body>
  <div id="tabBox" style="display:none">
    <div>Tab1
      <div style="padding: 10px; font-size: 30px;">
        This is tab1 content.
      </div>
    </div>
    <div>Tab2
      <div>
        This is tab2 content.
      </div>
    </div>
    <div>Tab3
      <div>
        This is tab3 content.
      </div>
    </div>
    <div id="tab4">Tab4
      <div>
        This is tab4 content.
      </div>
    </div>
  </div>

  <script type="text/javascript">
    var tab = new TabBox("tabBox");
  </script>
</body>

API

コンストラクタ(element)

引数	説明
element	HTML要素のID。この要素を解析してタブボックスを構築します。

オプション 第2引数として以下のオプションを指定することができます。オプションを指定するかどうかは任意です。

オプション名	デフォルト値	説明
selected	1	最初に選択状態になるタブの番号。最初は0でなく、1なので注意してください。
cssPrefix	'custom_'	カスタムスタイルシートのプレフィックス文字列。
beforeSelect	function(){returntrue}	タブが選択される直前に呼ばれる関数。偽を返すとタブの選択が中止されます。
afterSelect	Prototype.emptyFunction	タブが選択された直後に呼ばれる関数。現在表示されているパネル（DOM）と直前まで表示されていたパネル（DOM）が引数として渡されます。
afterSelectOnce	Prototype.emptyFunction	タブが選択された直後に一度だけ呼ばれる関数。補足「afterSelectOnceオプションについて」を参照してください。
onRemove	function(){returntrue}	タブが削除される直前（閉じるボタンを押されたとき）呼ばれる関数。タブ(DOM)が引数として渡されます。偽を返すと削除が中止されます。
sortable	false	D&Dによるタブの並び替えを可能にするかどうか。
closeButton	false	閉じるボタンを表示するかどうか。
afterSort	Prototype.emptyFunction	D&Dによる並び替えが終了した後に呼ばれる関数。Sortable(script.aculo.us)のonChangeオプションを参照してください。
onSort	Prototype.emptyFunction	D&Dによる並び替えを行った直後（D&Dの最中）に呼ばれる関数。Sortable(script.aculo.us)のonUpdateオプションを参照してください。
lazyLoadUrl	[]	遅延ロード時に使用される関数。タブのと同じ数の要素をもった配列でURLを指定します。
onLazyLoad	Prototype.emptyFunction	一つの遅延ロードに成功した場合に呼ばれる関数。遅延ロード対象のパネル（DOM）とTabBox?オブジェクトが引数として渡されます。
afterLazyLoad	Prototype.emptyFunction	遅延ロードが正常に終了した場合に呼ばれる関数。TabBox?オブジェクトが引数として渡されます。
lazyLoadFailure	Prototype.emptyFunction	遅延ロードに失敗した場合に呼ばれる関数。遅延ロード対象のパネル（DOM）とTabBox?オブジェクトが引数として渡されます。
failureLimitOver	Prototype.emptyFunction	遅延ロードがfailureLimitで指定された回数以上失敗した場合に呼ばれる関数。TabBox?オブジェクトが引数として渡されます。
failureLimit	5	遅延ロードに失敗したときにリトライする回数。
tabRow	null	一列に表示するタブの数。nullが指定された場合は無制限。
titleLength	null	タブの文字長。nullが指定された場合は無制限。

afterSelectOnceオプションについて

Function、Object（Hash）、Arrayでの指定が可能です。
Functionの場合、任意のタブが初めて選択されたときにそれぞれ一度ずつFunctionが呼ばれます。
```
     var tab = new TabBox("tabBox", {afterSelectOnce: function() { alert(0); }});
```
Object（Hash）の場合、タブの順番をキーとして関数を関連付けることができます。番号は1からです。
```
     var tab = new TabBox("tabBox", {afterSelectOnce: {1: function() { alert(0); }, 2: function() { alert(2); }}});
```

Arrayの場合は、要素の順番によって関連付けが行われます。

     var tab = new TabBox("tabBox", {afterSelectOnce: [function() { alert(0); }, function() { alert(2); }]});

afterSelect、beforeSelectオプションについて

afterSelectOnceオプションと同様に、Function、Object（Hash）、Arrayでの指定が可能です。

add(title, content)

新しいタブを追加します。

引数	\|説明
title	タブのタイトルをHTMLで指定します。
content	タブのコンテンツをHTMLで指定します。

  var tab = new TabBox('id');
  tab.add('<div>新しいタブ</div>', '<div>タブコンテンツ</div>');

hasNextTab()

現在選択されているタブの次がある場合、真を返します。

hasPreviousTab()

現在選択されているタブの前がある場合、真を返します。

getNextTab()

現在選択されているタブの次のタブ（DOM）を返します。

getPreviousTab()

現在選択されているタブの前のタブ（DOM）を返します。

selectNextTab()

現在選択されているタブの次のタブを選択状態にします。

selectPreviousTab()

現在選択されているタブの前のタブを選択状態にします。

tabCount()

タブの数を返します。

getCurrentPanel()

現在選択されているタブを返します。

getCurrentTab()

現在表示されているパネルを返します。

Download in other formats:

Plain Text