型：Boolean or Integer 初期値：0

どのパネルを開いておくかを指定します。

Boolean

falseを指定すると、全てのパネルが閉じられた(たたまれた)状態になります。 これを行うためには、collapsibleオプションをtrueに指定する必要があります。

Integer

0始まりの番号でアクティブにしておくパネルを指定します。 マイナスの値を指定すると、最後のパネルからカウントします。

$( ".selector" ).tabs({ active: 1 });

// getter
var active = $( ".selector" ).tabs( "option", "active" );

// setter
$( ".selector" ).tabs( "option", "active", 1 );

型：null

(1.9でbeforeLoadイベントが導入されたため、非推奨になりました。)
Additional Ajax options to consider when loading tab content (see jQuery.ajax()).

$( "#tabs" ).tabs({
    ajaxOptions: {
        username: "foo",
        password: "bar"
    }
});

型：Boolean
初期値：false

(1.9でbeforeLoadイベントが導入されたため、非推奨になりました。)
Whether or not to cache remote tabs content, e.g., load only once or with every click. 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 in the ajaxOptions option.

$( "#tabs" ).tabs({
    cache: true
});

型:Object
初期値:null

(1.9で非推奨になりました。)
Store the latest selected tab in a cookie. The cookie is then used to determine the initially selected tab if the selected option is not defined. Requires the cookie plugin, which can also be found in the development-bundle-external folder from the download builder. The object needs to have key/value pairs of the form the cookie plugin expects as options. Example: { expires 7, path: "/", domain: "jquerycom", secure: true }. Since jQuery UI 1.7 it is also possible to define the cookie name being used via the name property.

型：Boolean
初期値：false

trueを指定すると、アクティブなパネルであっても閉じることが出来るようになります。

型：Boolean or Array
初期値：false

タブを無効化します。

Boolean

全てのタブを対象にします。

Array

無効化したいタブを0始まりの番号で配列に指定します。 例えば、[0,2]と指定した場合、1つ目と3つ目のタブが無効化されます。

型：String
初期値："click"

タブに反応して欲しいイベントを指定します。 hoverの際にアクティブにしたければ、"mouseorver"を指定します。

型：Object or Array
初期値：null

(1.9でshow、hideオプションが導入されたため、非推奨になりました)
Enable animations for hidniga nd showing tab panels.

Object

Key/value pairs of properties to animate and optional duration, e.g., { height: "toggle", duration: 200 }.

Array

Animation settings in the form [ hideSettings, showSettings ].

型：String
初期値："content"

タブとパネルの高さを制御します。

"auto"

全てのパネルは最も高いパネルの高さになります。

"fill"

タブの親要素を基準に可能な限りの高さで展開されます。

"content"

それぞれのパネルはそれぞれの内容に合わせて高さ調節されます。

型：Boolean or Number or String or Object
初期値：null

パネルの非表示をアニメーションさせるか、またどのようにアニメーションさせるかを決定します。

Boolean

falseをセットすると、アニメーションせず即座に非表示になります。 trueをセットすると初期値に設定されているdurationとeasingでフェードアウトします。

Number

指定した数値をdurationとしてフェードアウトします。easingは初期値が使用されます。

String

指定したエフェクトのアニメーションでパネルを非表示にします。 指定できる値はjQueryの組み込まれている"slideUp"のようなアニメーション名か、 jQueryUIエフェクトである"fold"のようなアニメーション名を指定できます。 どちらの場合も、durationとeaingは初期値が使用されます。

Object

オブジェクトを使用する場合、effect, duration, easingのプロパティが提供されます。 プロパティのeffectは上記のStringを、durationはNumberをそれぞれ指定したことになります。 duration、easingが省略された場合は初期値が使用され、effectが使用された場合は"fadeOut"が 使用されます。

//1秒(1000ミリ秒)かけて、explodeのエフェクトアニメーションで非表示になります。
$(".selector").tabs({ hide: { effect: "explode", duration: 1000 } });

型:String
初期値:"ui-tabs-"

(1.9でrefreshメソッドが導入されたため、非推奨になりました。)
If the remote tab, its anchor element that is, has no title attribute to generate an id from, an id/fragment identifier is created from this prefix and a unique id, for example "ui-tabs-54".

型:String
初期値:"<div></div>"

(1.9でrefreshメソッドが導入されたため、非推奨になりました。)
HTML template from which a new tab panel is created in case of adding a tab with the add() method or when creating a panel for a remote tab on the fly.

型：Boolean or Number or String or Object
初期値：null

パネルの非表示をアニメーションさせるか、またどのようにアニメーションさせるかを決定します。

Boolean

falseをセットすると、アニメーションせず即座に表示されます。 trueをセットすると初期値に設定されているdurationとeasingでフェードインします。

Number

指定した数値をdurationとしてフェードインします。easingは初期値が使用されます。

String

指定したエフェクトのアニメーションでパネルを表示します。 指定できる値はjQueryの組み込まれている"slideDown"のようなアニメーション名か、 jQueryUIエフェクトである"fold"のようなアニメーション名を指定できます。 どちらの場合も、durationとeaingは初期値が使用されます。

Object

オブジェクトを使用する場合、effect, duration, easingのプロパティが提供されます。 プロパティのeffectは上記のStringを、durationはNumberをそれぞれ指定したことになります。 duration、easingが省略された場合は初期値が使用され、effectが使用された場合は"fadeIn"が 使用されます。

型：String
初期値："<em>Loading&#8230;</em>"

(1.9で非推奨になり、代わりにbeforeLoadイベントとloadイベントで処理を行うことが推奨されています。)
The HTML content to show in a tab title while remote content is loading. Set this option to an empty string to deactivate the spinner behavior. A span element must be present in the anchor tag of the title for the spinner content to be visible.

型:String
初期値:"<li><a href="#{href}"><span>#{label}</span></a></li>"

(1.9でrefreshメソッドが導入されたため、非推奨になりました。)
HTML template from which a new tab panel is created in case of adding a tab with the add() method or when creating a panel for a remote tab on the fly.

Terminate all running tab ajax requests and animations.

//1.8
$( "#tabs" ).tabs( "abort" );

//1.9～
$( "#tabs" ).tabs({
    beforeLoad: function( event, ui ) {
        ui.jqXHR.abort();
    }
});

(1.9でrefreshメソッドが導入されたため、非推奨になりました。)
Add a tab.

url

型:String
The URL of the tab to add.

label

型:String
The name of the tab to add.

index

型:Number
Where to add the new tab (zero-based). If omitted, the new tab will be added as the last tab.

//1.8
$( "#tabs" ).tabs( "add", "/remote/tab.html", "New Tab" );

//1.9～ : タブ要素を追加した後に、refreshメソッドを実行
$( "<li><a href='/remote/tab.html'>New Tab</a></li>" )
    .appendTo( "#tabs .ui-tabs-nav" );
$( "#tabs" ).tabs( "refresh" );

ダイアログの機能を完全に削除します。

$( ".selector" ).tabs( "destroy" );

タブを無効化します。

タブを無効化します。選択されているタブを無効化することは出来ません。 1度の処理で複数のタブを無効化したい場合は、disabledオプションを使用してください。

index

型Number or String
無効化したいタブを指定します。

タブを有効にします。

タブを有効にします。

index

型:Number or String
有効化したいタブを指定します。

一度で複数のタブを無効化状態から有効化したい場合、下記のようにdisabledオプションを使用します。

$( "#example" ).tabs( "option", "disabled", [] );.

戻り値:Integer

(1.9で非推奨になりました。)
Retrieve the number of tabs of the first matched tab pane.

離れたタブのコンテンツパネルをロードします。

index

型:Number or String
ロードしたいタブを選択します。

戻り値：Object

optionNameに指定したオプションの現在の値を取得します。

optionName

型：String
取得したいオプションの名前を指定します。

戻り値：PlainObject

オプションの各キーと値がペアとなったオブジェクトを返します。

引数のoptionNameのオプションに値を設定します。

optionName

型：String
設定したいオプションの名前を指定します。

value

型：Object
設定したい値を指定します。

オプションに設定したい各キーと値がペアとなったオブジェクトを指定します。

option

型：Object
設定したいオプションのキーと名前のペアを指定します。

DOMの直接の操作で追加または削除をされ、タブパネルの高さが再計算されたタブを処理します。 結果はコンテンツとheightStyleオプションに依存します。

(1.9でrefreshメソッドが導入されたため、非推奨になりました。)
Remove a tab.

index

型:Number or String
Which tab to remove.

//1.8
$( "#tabs" ).tabs( "remove", 2 );

//1.9～
// タブを削除
var tab = $( "#tabs" ).find( ".ui-tabs-nav li:eq(2)" ).remove();
// パネルに紐づくIDを取得
var panelId = tab.attr( "aria-controls" );
// パネルを削除
$( "#" + panelId ).remove();
// タブをリフレッシュ
$( "tabs" ).tabs( "refresh" );

(1.9で削除されました。)
Set up an automation rotation through the tabs.

duration

型:Number
The duration in milliseconds for each tab to be visible before rotating to the next tab.

continuing(初期値:false)

型:Boolean
Whether or not to continue the rotation after a tab has been selected by a user.

(1.9で非推奨になりました。)
Select a tab, as if it were clicked.

index

型:Integer
Which tab to select.

// 1.8 : 3つ目のタブをアクティブ
$( "#tabs" ).tabs( "select", 2 );

// 1.9～ : 3つ目のパネルをアクティブ
$( "#tabs" ).tabs( "option", "active", 2 );

Change the URL from whcih an Ajax (remote) tab will be loaded. The specified URL will be used for subsequent loads. Note that you can not only change the URL for an existing remote tab with this method, but also turn an in-page tab into a remote tab.

index

型:Integer
The zero-based index of the tab to update.

url

型:String
The URL to set for the tab.

戻り値：Object

タブコンテナを含めたjQueryオブジェクトを返します。

型：tabsactivate(showでは、tabsshow)

タブがアクティブになった際(アニメーション完了後)にトリガされます。 直前の状態でどのパネルも展開されていなかった場合、ui.oldTabとui.oldPanelは空のjQueryオブジェクトになります。 もし、アクティブになった際にどのパネルも展開サれなければ、ui.newTabとui.newPanelが空のjQueryオブジェクトになります。

ui.newTab

アクティブになったタブです(showでは、ui.tab)

ui.oldTab

非アクティブになったタブです。

ui.newPanel

アクティブになったパネルです。(showでは、ui.panel)

ui.oldPanel

非アクティブになったパネルです。

$( ".selector" ).tabs({
    activate: function( event, ui ) {}
});

$( ".selector" ).on( "tabsactivate", function( event, ui ) {} );

型：tabsactivate(selectでは、tabsselect)

タブがアクティブになった際(アニメーション完了後)にトリガされます。 直前の状態でどのパネルも展開されていなかった場合、ui.oldTabとui.oldPanelは空のjQueryオブジェクトになります。 もし、アクティブになった際にどのパネルも展開されなければ、ui.newTabとui.newPanelが空のjQueryオブジェクトになります。

ui.newTab

アクティブになったタブです。(selectでは、ui.tab)

ui.oldTab

非アクティブになったタブです。

ui.newPanel

アクティブになったパネルです。(selectでは、ui.panel)

ui.oldPanel

非アクティブになったパネルです。

//1.8
$( "#tabs" ).tabs({
  select: function( event, ui ) {
    ui.panel
    ui.tab
    // アクティブになったタブのインデックス番号
    ui.index
  }
});

//1.9～
$( "#tabs" ).tabs({
  beforeActivate: function( event, ui ) {
    ui.oldPanel       // (追加)
    ui.oldTab         // (追加)
    ui.newPanel       // (ui.panel変更)
    ui.newTab         // (ui.tab変更)

    // インデックス番号は次のように取得可能
    ui.newTab.index()
  }
});

型：tabsbeforeload

タブがロードされる際、beforeActivateのイベント後にトリガされます。 タブパネルにコンテンツをロードすることを、キャンセルすることで防ぐことができます。 パネルはアクティブ化されたままになりますが。 このイベントは、Ajaxリクエストを行う直前にトリガされるので、 ui.jqXHRとui.ajaxSettingsを介して変更することが可能です。

ui.tab

型:jQuery
ロードするタブです。

ui.panel

型:jQuery
Ajaxのレスポンを受け入れるパネルです。

ui.jqXHR

型:jqXHR
コンテンツをリクエストしているjqXHRオブジェクトです。

ui.ajaxSettings

型:Object
jQuery.ajaxのリクエストに設定として、使用されているオブジェクトです。

// ajaxOptionsオプションに代わる新しい指定
$( "#tabs" ).tabs({
  beforeLoad: function( event, ui ) {
    ui.ajaxSettings.username = "foo";
    ui.ajaxSettings.password = "bar";
  }
});

// cacheオプションに代わる新しい指定
$( "#tabs" ).tabs({
    if ( ui.tab.data( "loaded" ) ) {
      event.preventDefault();
      return;
    }

    ui.jqXHR.success(function() {
      ui.tab.data( "loaded", true );
    });
  }  beforeLoad: function( event, ui ) {
    if ( ui.tab.data( "loaded" ) ) {
      event.preventDefault();
      return;
    }

    ui.jqXHR.success(function() {
      ui.tab.data( "loaded", true );
    });
  }
});

型：tabscreate

タブが生成された際にトリガされます。 タブパネルが全て折りたたまれている場合、ui.tabとui.panelは空のjQueryオブジェクトになります。

ui.tab

型:jQuery
アクティブなタブです。

ui.panel

型:jQuery
アクティブなパネルです。

型:tabsdisable

(1.9で他のUIと一貫性を持たせるため、非推奨になりました。)
Triggered when a tab is disabled.

ui.tab

型:Element
The tab that is being disabled.

ui.panel

型:Element
The panel that is being disabled.

ui.index

型:Integer
The zero-based index of the tab.

型:tabsenable

(1.9で他のUIと一貫性を持たせるため、非推奨になりました。)
Triggered when a tab is enabled.

ui.tab

型:Element
The tab that is being enabled.

ui.panel

型:Element
The panel that is being enabled.

ui.index

型:Integer
The zero-based index of the tab.

型：tabsload

ダイアログのドラッグが開始される際にトリガされます。

ui.tab

型:jQuery
ロードしているタブです。

ui.panel

型:jQuery
Ajaxのレスポンを受け入れるパネルです。