jQuery UI/Tabs

タブナビゲーションを作成できるjQuery UIプラグイン。以下はUI/API/1.7.1/Tabs - jQuery JavaScript Libraryの要約。

概要

タブは通常アコーディオンのように、コンテンツを、スペースを節約できる切り換え型のセクションに入れるのに使用される。
デフォルトではタブのクリックでセクションを切り替えるが、オプションでhoverにもできる。タブのコンテンツはタブにhrefを設定する事でAjaxを通して読み込む事もできる。

イベント

一連のイベントがタブの操作で実行される。

tabsselect, tabsload, tabsshow（この順番で）
tabsadd, tabsremove
tabsenable, tabsdisable

イベントバインドの例：

$('#example').bind('tabsselect', function(event, ui) {

  // 関数内で有効なオブジェクト:
  ui.tab     // 選択された（クリックされた）タブのアンカー要素
  ui.panel   // 選択/クリックされたタブのコンテンツを含むエレメント
  ui.index   // 選択された（クリックされた）タブの0から始まるインデックス

});

tabsselectイベントハンドラがfalseを返した場合、クリックされたタブはselectedにならない事に注意（useful for example if switching to the next tab requires a form validation）。

AJAXモード

タブは控えめなマナーで（？）Ajaxによりタブのコンテンツを読み込める。

静的なタブとして使用されるHTMLはそれぞれ僅かに違う：リソースを指すリンクのリスト。追加のコンテナタグは必要ない。コンテナのマークアップは密かに生成される。

<div id="example">
  <ul>
    <li><a href="ahah_1.html"><span>Content 1</span></a></li>
    <li><a href="ahah_2.html"><span>Content 2</span></a></li>
    <li><a href="ahah_3.html"><span>Content 3</span></a></li>
  </ul>
</div>

この分解はスマート。JavaScriptが無効でも、タブコンテンツへのアクセスが可能。

コンテナを再利用したければ、title属性とコンテナのIDのマッチを元に利用できる。

<li><a href="hello/world.html" title="Todo Overview"> ... </a></li>

この時コンテナは

<div id="Todo_Overview"> ... </div>

（空白はアンダースコアに置換される事に注意）

これはURLに可読ハッシュを用いたい場合に使える。

戻るボタンとブックマーク

Tabs 2 already supported this functionality, although the history plugin needs a rewrite first (Safari 3はサポートしておらず、少々柔軟性に欠ける) before it can be build back into the tabs. これは予定されており、Klausは時間があれば解決に向けて動いている。現在UI Tabsプラグインに存在するバグの解決が常に優先される。

様々な方法

選択されているタブのインデックスを取得

var $tabs = $('#example').tabs();
var selected = $tabs.tabs('option', 'selected'); // => 0

ページを去らず、現在のタブのリンクを開く

$('#example').tabs({
  load: function(event, ui) {
    $('a', ui.panel).click(function() {
      $(ui.panel).load(this.href);
        return false;
    });
  }
});

タブをクリックする代わりにテキストリンクでタブを選択する

var $tabs = $('#example').tabs(); // first tab selected

$('#my-text-link').click(function() { // リンクにクリックイベントをバインド
  $tabs.tabs('select', 2); // 3つ目のタブにスイッチ
  return false;
});

フォームバリデーションによって、クリックされたタブへのスイッチを防止する

タブ選択ハンドラ内でfalseを返し、クリックされたタブが選択状態になるのを防止する。

$('#example').tabs({
  select: function(event, ui) {
    var isValid = ... // form validation returning true or false
    return isValid;
  }
});

追加したタブを即座に選択状態にする

var $tabs = $('#example').tabs({
  add: function(event, ui) {
    $tabs.tabs('select', '#' + ui.panel.id);
  }
});

タブを新しいウインドウで開く

タブを新しいウインドウで開く事はユーザビリティの面で問題がある事に注意。

$('#example').tabs({
  select: function(event, ui) {
    location.href = $.data(ui.tab, 'load.tabs');
    return false;
  }
});

タブが初期化される前のFOUC (Flash of Unstyled Content：スタイルの当たっていないコンテンツが見えてしまう）を防ぐ

非アクティブなパネルを隠すため、HTMLに必要なクラスを付与する - これはJavaScript無効時に問題を生じる事に注意。

<div id="example" class="ui-tabs">
  ...
  <div id="a-tab-panel" class="ui-tabs-hide"> </div>
  ...
</div>

なぜ動かないのか

slider, Google Map, sIFRなどを非アクティブなタブに置くと動作しない

初期化時にサイズの判定を必要とするコンポーネントを隠れたタブコンテンツ内に置くと動作しない。タブパネルはdisplay: noneによって隠されており、中身は正しいwidth、heightを返さない（多くのブラウザでは0になる）。

簡単な回避方法がある。off-leftテクニックを使用し、".ui-tabs .ui-tabs-hide"セレクタのルールを変更する。

.ui-tabs .ui-tabs-hide {
  position: absolute;
  left: -10000px;
}

Googleマップの場合は、タブ表示時にこのようにしてリサイズもできる。

$('#example').bind('tabsshow', function(event, ui) {
  if (ui.panel.id == "map-tab") {
    resizeMap();
  }
});

resizeMap()はGoogleマップのcheckResize()をコールする。

依存

UI Core
オプションとしてクッキーの使用も可能:jquery.cookie.js
CSSに以下の記述が必要
.ui-tabs .ui-tabs-hide { display: none; }

実例

head要素内

<link type="text/css" href="http://jqueryui.com/latest/themes/base/ui.all.css" rel="stylesheet" />
<script type="text/javascript" src="http://jqueryui.com/latest/jquery-1.3.2.js"></script>
<script type="text/javascript" src="http://jqueryui.com/latest/ui/ui.core.js"></script>
<script type="text/javascript" src="http://jqueryui.com/latest/ui/ui.tabs.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $("#tabs").tabs();
});
</script>

タブ部分のHTML

<div id="tabs">
  <ul>
    <li><a href="#fragment-1"><span>One</span></a></li>
    <li><a href="#fragment-2"><span>Two</span></a></li>
    <li><a href="#fragment-3"><span>Three</span></a></li>
  </ul>
  <div id="fragment-1">
    <p>First tab is active by default:</p>
    <pre><code>$('#example').tabs();</code></pre>
  </div>
  <div id="fragment-2">
    Lorem ipsum dolor sit amet
  </div>
  <div id="fragment-3">
    Lorem ipsum dolor sit amet
  </div>
</div>

オプション

ajaxOptions 値: オプションデフォルト:null

タブコンテンツ読み込み時の追加Ajaxオプション（$.ajaxを参照）。

ajaxOptionsを用いたタブの初期化

$('.selector').tabs({ ajaxOptions: { async: false } });

初期化後にajaxOptionsを取得または指定

//getter
var ajaxOptions = $('.selector').tabs('option', 'ajaxOptions');
//setter
$('.selector').tabs('option', 'ajaxOptions', { async: false });

cache 値: ブール値デフォルト:false

リモートのタブコンテンツをキャッシュするかどうか、つまり1度だけ読み込むか、タブを選択するごとに読み込むか。Cached content is being lazy loaded, e.g once and only once for the first click. Note that to prevent the actual Ajax requests from being cached by the browser you need to provide an extra cache: false flag to ajaxOptions.

cacheオプションを用いたタブの初期化

$('.selector').tabs({ cache: true });

初期化後にcacheオプション値を取得または指定

//getter
var cache = $('.selector').tabs('option', 'cache');
//setter
$('.selector').tabs('option', 'cache', true);

collapsible 値: ブール値デフォルト:false

選択されているタブを再選択した場合に選択状態を解除するなら、trueを指定する。

collapsibleオプションを用いたタブの初期化

$('.selector').tabs({ collapsible: true });

初期化後にcollapsibleオプション値を取得または指定

//getter
var collapsible = $('.selector').tabs('option', 'collapsible');
//setter
$('.selector').tabs('option', 'collapsible', true);

cookie 値: オブジェクトデフォルト:null

クッキーに最後に選択されていたタブを記録する。selectedオプションが指定されていない場合に、クッキーを元に選択状態のタブを決定する。cookieプラグインが必要。オプションとしてcookieプラグインが必要とするキーと値のペアのオブジェクトが必要。有効なオプションの例：{ expires: 7, path: '/', domain: 'jquery.com', secure: true }。jQuery UI 1.7からnameプロパティによりクッキー名の指定が可能になった。

cookieオプションを用いたタブの初期化

$('.selector').tabs({ cookie: { expires: 30 } });

初期化後にcookieオプション値を取得または指定

//getter
var cookie = $('.selector').tabs('option', 'cookie');
//setter
$('.selector').tabs('option', 'cookie', { expires: 30 });

deselectable 値: ブール値デフォルト:false

jQuery UI 1.7では非推奨、collapsibleを使うべき。

disabled 値: 配列（数値）デフォルト:[]

初期化時に無効にするタブの位置（0から始まるインデックス）の配列。

disabledオプションを用いたタブの初期化

$('.selector').tabs({ disabled: [1, 2] });

初期化後にdisabledオプション値を取得または指定

//getter
var disabled = $('.selector').tabs('option', 'disabled');
//setter
$('.selector').tabs('option', 'disabled', [1, 2]);

event 値: 文字列デフォルト:'click'

タブ選択のイベントタイプ。

eventオプションを用いたタブの初期化

$('.selector').tabs({ event: 'mouseover' });

初期化後にeventオプション値を取得または指定

//getter
var event = $('.selector').tabs('option', 'event');
//setter
$('.selector').tabs('option', 'event', 'mouseover');

fx 値: オプション、配列（オプション）デフォルト:null

タブパネルの表示/非表示時のアニメーションを有効にする。durationオプションは予め設定された3つのスピードの文字列("slow", "normal", "fast")か、ミリ秒の数値（デフォルトは"normal"）。

fxオプションを用いたタブの初期化

$('.selector').tabs({ fx: { opacity: 'toggle' } });

初期化後にfxオプション値を取得または指定

//getter
var fx = $('.selector').tabs('option', 'fx');
//setter
$('.selector').tabs('option', 'fx', { opacity: 'toggle' });

idPrefix 値: 文字列デフォルト:'ui-tabs-'

リモートタブの場合に自動生成されるidに使用されるプリフィックス。$.data(el)から返されるユニークなIDと合わせて"ui-tabs-54"のように生成される。

idPrefixオプションを用いたタブの初期化

$('.selector').tabs({ idPrefix: 'ui-tabs-primary' });

初期化後にidPrefixオプション値を取得または指定

//getter
var idPrefix = $('.selector').tabs('option', 'idPrefix');
//setter
$('.selector').tabs('option', 'idPrefix', 'ui-tabs-primary');

panelTemplate 値: 文字列デフォルト:'<div></div>'

タブ追加やリモートタブの場合にタブパネルに使用されるHTMLテンプレート。

panelTemplateオプションを用いたタブの初期化

$('.selector').tabs({ panelTemplate: '<li></li>' });

初期化後にpanelTemplateオプション値を取得または指定

//getter
var panelTemplate = $('.selector').tabs('option', 'panelTemplate');
//setter
$('.selector').tabs('option', 'panelTemplate', '<li></li>');

selected 値: 数値デフォルト:0

初期化時の選択タブを示す0から始まるインデックス。全て非選択にする場合は-1。

selectedオプションを用いたタブの初期化

$('.selector').tabs({ selected: 3 });

初期化後にselectedオプション値を取得または指定

//getter
var selected = $('.selector').tabs('option', 'selected');
//setter
$('.selector').tabs('option', 'selected', 3);

spinner 値: 文字列デフォルト:'<em>Loading…</em>'

リモートコンテンツ読み込み中に表示される文字列。空文字列を指定すると無効化できる。

spinnerオプションを用いたタブの初期化

$('.selector').tabs({ spinner: 'Retrieving data...' });

初期化後にspinnerオプション値を取得または指定

//getter
var spinner = $('.selector').tabs('option', 'spinner');
//setter
$('.selector').tabs('option', 'spinner', 'Retrieving data...');

tabTemplate 値: 文字列デフォルト:'<li><a href="#{href}"><span>#{label}</span></a></li>'

新しいタブが動的に追加される場合のHTMLテンプレート。addメソッドにURL、タブラベルが渡された場合#{href}と#{label}が置換される。

tabTemplateオプションを用いたタブの初期化

$('.selector').tabs({ tabTemplate: '<div><a href="#{href}"><span>#{label}</span></a></div>' });

初期化後にtabTemplateオプション値を取得または指定

//getter
var tabTemplate = $('.selector').tabs('option', 'tabTemplate');
//setter
$('.selector').tabs('option', 'tabTemplate', '<div><a href="#{href}"><span>#{label}</span></a></div>');

イベント

select タイプ: tabsselect

このイベントはタブクリック時に発生する。

初期化時にselectイベントのコールバック関数を指定する

$('.selector').tabs({
   select: function(event, ui) { ... }
});

タイプによりselectイベントをバインドする

$('.selector').bind('tabsselect', function(event, ui) {
  ...
});

load タイプ: tabsload

このイベントはリモートタブのコンテンツが読み込まれた時に発生する。

初期化時にloadイベントのコールバック関数を指定する

$('.selector').tabs({
   load: function(event, ui) { ... }
});

タイプによりloadイベントをバインドする

$('.selector').bind('tabsload', function(event, ui) {
  ...
});

show タイプ: tabsshow

このイベントはタブが表示される時に発生する。

初期化時にshowイベントのコールバック関数を指定する

$('.selector').tabs({
   show: function(event, ui) { ... }
});

タイプによりshowイベントをバインドする

$('.selector').bind('tabsshow', function(event, ui) {
  ...
});

add タイプ: tabsadd

このイベントはタブが追加される時に発生する。

初期化時にaddイベントのコールバック関数を指定する

$('.selector').tabs({
   add: function(event, ui) { ... }
});

タイプによりaddイベントをバインドする

$('.selector').bind('tabsadd', function(event, ui) {
  ...
});

remove タイプ: tabsremove

このイベントはタブが削除される時に発生する。

初期化時にremoveイベントのコールバック関数を指定する

$('.selector').tabs({
   remove: function(event, ui) { ... }
});

タイプによりremoveイベントをバインドする

$('.selector').bind('tabsremove', function(event, ui) {
  ...
});

enable タイプ: tabsenable

このイベントはタブが有効になる時に発生する。

初期化時にenableイベントのコールバック関数を指定する

$('.selector').tabs({
   enable: function(event, ui) { ... }
});

タイプによりenableイベントをバインドする

$('.selector').bind('tabsenable', function(event, ui) {
  ...
});

disable タイプ: tabsdisable

このイベントはタブが無効になる時に発生する。

初期化時にdisableイベントのコールバック関数を指定する

$('.selector').tabs({
   disable: function(event, ui) { ... }
});

タイプによりdisableイベントをバインドする

$('.selector').bind('tabsdisable', function(event, ui) {
  ...
});

メソッド

destroy

シグネチャー

.tabs( 'destroy' )

タブの機能を完全に取り除く。要素をタブ初期化前の状態に戻す。

disable

シグネチャー

.tabs( 'disable' )

タブを無効にする。

enable

シグネチャー

.tabs( 'enable' )

タブを有効にする。

option

シグネチャー

.tabs( 'option' , optionName , [value] )

タブオプションを設定または取得する。valueを指定しなければ、getterとして動作する。

add

シグネチャー

.tabs( 'add' , url , label , [index] )

新しいタブを追加する。2つ目の引数はページ内の要素を指すフラグメントIDか、新しいAjaxタブのコンテンツを指すフルURL（相対または絶対パス。クロスドメインはサポートしない）。4つ目の引数はタブを追加する位置を示す0から始まるインデックス。デフォルトでは最後に追加される。

remove

シグネチャー

.tabs( 'remove' , index )

タブを削除。2つ目の引数は0から始まるインデックス。

enable

シグネチャー

.tabs( 'enable' , index )

タブを有効にする。2つ以上のタブを一度に有効にするには$('#example').data('disabled.tabs', []);というようにする。2つ目の引数は0から始まるインデックス。

disable

シグネチャー

.tabs( 'disable' , index )

タブを無効にする。2つ以上のタブを一度に無効にするには$('#example').data('disabled.tabs', [1, 2, 3]);というようにする。2つ目の引数は0から始まるインデックス。

select

シグネチャー

.tabs( 'select' , index )

クリックされた時同様にタブを選択状態にする。2つ目の引数は0から始まるインデックスか、パネルのID（タブのhrefフラグメントID）。

load

シグネチャー

.tabs( 'load' , index )

Ajaxタブの再読み込み。cacheオプションがtrueでも再読み込みする。2つ目の引数は0から始まるインデックス。

url

シグネチャー

.tabs( 'url' , index , url )

AjaxタブのURLを変更する。ページ内のコンテンツを指すタブを、Ajaxタブに変更するのにも使用できる。2つ目の引数は0から始まるインデックス。

length

シグネチャー

.tabs( 'length' )

最初にマッチしたタブセットからタブ数を返す。

abort

シグネチャー

.tabs( 'abort' )

全てのAjaxリクエストとアニメーションを中止。

rotate

シグネチャー

.tabs( 'rotate' , ms , [continuing] )

タブの自動切り替えを設定する。2つ目の引数は次のタブに移るまでのミリ秒。0またはnullを指定すると自動切り替えをやめる。3つ目の引数はユーザーがタブを選択した場合に自動切り替えをやめるかどうか。デフォルトはfalse。

Theming

jQuery UI Tabsプラグインは、ルック＆フィールの設定にjQuery UI CSS Frameworkを使用する。カスタムテーマの作成、ダウンロードを簡単に行えるThemeRollerツールの使用をお薦めする。

より高度なカスタマイズが必要なら、編集可能なui.tabs.cssから参照されているwidget-specificなクラスがある。以下のboldになっているのが該当部分。

jQuery UI CSS Frameworkのサンプルマークアップ

<div class="ui-tabs ui-widget ui-widget-content ui-corner-all" id="tabs">
   <ul class="ui-tabs-nav ui-helper-reset ui-helper-clearfix ui-widget-header ui-corner-all">
     <li class="ui-state-default ui-corner-top ui-tabs-selected ui-state-active"><a href="#tabs-1">Nunc tincidunt</a></li>
      <li class="ui-state-default ui-corner-top"><a href="#tabs-2">Proin dolor</a></li>
   <div class="ui-tabs-panel ui-widget-content ui-corner-bottom" id="tabs-1">
      <p>Tab one content goes here.</p>
   </div>
    ...
</div>

注：これはtabsプラグインにより生成されるサンプルマークアップで、タブ作成時に使用しなければいけないマークアップではない。最小限のマークアップは以下の通り。

<div id="tabs">
  <ul>
    <li><a href="#tabs-1">Nunc tincidunt</a></li>
    <li><a href="#tabs-2">Proin dolor</a></li>
    <li><a href="#tabs-3">Aenean lacinia</a></li>
  </ul>
  <div id="tabs-1">
    <p>Tab 1 content</p>
  </div>
  <div id="tabs-2">
    <p>Tab 2 content</p>
  </div>
  <div id="tabs-3">
    <p>Tab 3 content</p>
  </div>
</div>

概要

イベント

AJAXモード

戻るボタンとブックマーク

様々な方法

選択されているタブのインデックスを取得

ページを去らず、現在のタブのリンクを開く

タブをクリックする代わりにテキストリンクでタブを選択する

フォームバリデーションによって、クリックされたタブへのスイッチを防止する

追加したタブを即座に選択状態にする

タブを新しいウインドウで開く

タブが初期化される前のFOUC (Flash of Unstyled Content：スタイルの当たっていないコンテンツが見えてしまう）を防ぐ

なぜ動かないのか

slider, Google Map, sIFRなどを非アクティブなタブに置くと動作しない

依存

実例

head要素内

タブ部分のHTML

オプション

ajaxOptions 値: オプション デフォルト:null

ajaxOptionsを用いたタブの初期化

初期化後にajaxOptionsを取得または指定

cache 値: ブール値 デフォルト:false

cacheオプションを用いたタブの初期化

初期化後にcacheオプション値を取得または指定

collapsible 値: ブール値 デフォルト:false

collapsibleオプションを用いたタブの初期化

初期化後にcollapsibleオプション値を取得または指定

cookie 値: オブジェクト デフォルト:null

cookieオプションを用いたタブの初期化

初期化後にcookieオプション値を取得または指定

deselectable 値: ブール値 デフォルト:false

disabled 値: 配列（数値） デフォルト:[]

disabledオプションを用いたタブの初期化

初期化後にdisabledオプション値を取得または指定

event 値: 文字列 デフォルト:'click'

eventオプションを用いたタブの初期化

初期化後にeventオプション値を取得または指定

fx 値: オプション、配列（オプション） デフォルト:null

fxオプションを用いたタブの初期化

初期化後にfxオプション値を取得または指定

idPrefix 値: 文字列 デフォルト:'ui-tabs-'

idPrefixオプションを用いたタブの初期化

初期化後にidPrefixオプション値を取得または指定

panelTemplate 値: 文字列 デフォルト:'<div></div>'

panelTemplateオプションを用いたタブの初期化

初期化後にpanelTemplateオプション値を取得または指定

selected 値: 数値 デフォルト:0

selectedオプションを用いたタブの初期化

初期化後にselectedオプション値を取得または指定

spinner 値: 文字列 デフォルト:'<em>Loading&#8230;</em>'

spinnerオプションを用いたタブの初期化

初期化後にspinnerオプション値を取得または指定

tabTemplate 値: 文字列 デフォルト:'<li><a href="#{href}"><span>#{label}</span></a></li>'

tabTemplateオプションを用いたタブの初期化

初期化後にtabTemplateオプション値を取得または指定

イベント

select タイプ: tabsselect

初期化時にselectイベントのコールバック関数を指定する

タイプによりselectイベントをバインドする

load タイプ: tabsload

初期化時にloadイベントのコールバック関数を指定する

タイプによりloadイベントをバインドする

show タイプ: tabsshow

初期化時にshowイベントのコールバック関数を指定する

タイプによりshowイベントをバインドする

add タイプ: tabsadd

初期化時にaddイベントのコールバック関数を指定する

タイプによりaddイベントをバインドする

remove タイプ: tabsremove

初期化時にremoveイベントのコールバック関数を指定する

タイプによりremoveイベントをバインドする

enable タイプ: tabsenable

初期化時にenableイベントのコールバック関数を指定する

タイプによりenableイベントをバインドする

disable タイプ: tabsdisable

初期化時にdisableイベントのコールバック関数を指定する

タイプによりdisableイベントをバインドする

メソッド

ajaxOptions 値: オプションデフォルト:null

cache 値: ブール値デフォルト:false

collapsible 値: ブール値デフォルト:false

cookie 値: オブジェクトデフォルト:null

deselectable 値: ブール値デフォルト:false

disabled 値: 配列（数値）デフォルト:[]

event 値: 文字列デフォルト:'click'

fx 値: オプション、配列（オプション）デフォルト:null

idPrefix 値: 文字列デフォルト:'ui-tabs-'

panelTemplate 値: 文字列デフォルト:'<div></div>'

selected 値: 数値デフォルト:0

spinner 値: 文字列デフォルト:'<em>Loading…</em>'

tabTemplate 値: 文字列デフォルト:'<li><a href="#{href}"><span>#{label}</span></a></li>'

月別アーカイブ