SelectorTipsアイコン一覧CSSフレームワークイージングTabshttp://api.jqueryui.com/1.10/tabs/単一のページに複数のパネルを設置することで、各リストのヘッダーに関連させるタブ機能を提供します。<p>デフォルトのタブです。<p>タブ2のコンテンツ領域です。<p>タブ3のコンテンツ領域です。タブ2のコンテンツ領域です。<p><strong>タブを再度クリックすると、全てのタブが閉じられた状態になります。<p>折りたたみ可能なタブです。<p><strong>タブを再度クリックすると、全てのタブが閉じられた状態になります。<p>タブ2のコンテンツ領域です。<p><strong>タブを再度クリックすると、全てのタブが閉じられた状態になります。<p>タブ3のコンテンツ領域です。ui.panel.html("このタブのコンテンツのロードに失敗しました。<p>このコンテンツはロード済みです。<p>他のタブ情報はAjaxによって、コンテンツ取得を試みます。<p>マウスオーバーで切り替わるタブです。<p>タブ2のコンテンツ領域です。<p>タブ3のコンテンツ領域です。<p>編集可能なタブです。<p>タブをドラッグ&amp;ドロップで移動することが可能です。<p>タブ2のコンテンツ領域です。<p>タブ3のコンテンツ領域です。<p>下付きのタブです。<p>タブ2のコンテンツ領域です。<p>タブ3のコンテンツ領域です。<p>縦方向に並んだタブです。<p>タブ2のコンテンツ領域です。<p>タブ3のコンテンツ領域です。</div></div></body></html>概要オプションメソッドイベントタイトルバーとコンテツ領域を持ったダイアログです。このダイアログは次のような機能を提供します。キーボード操作のサポートについてタブがフォーカスされている場合、下記のキーコマンドが利用可能なります。[↑]/[←]一つ前のタブに戻ります。最初のタブの場合、最後のタブに移動します。遅れてから、フォーカスされたタブがアクティブになります。[↓]/[→]次のタブに移動します。最後のタブの場合、最初のタブに移動します。遅れてから、フォーカスされたタブがアクティブになります。HOME最初のタブに移動します。遅れてから、フォーカスされたタブがアクティブになります。END最後のタブに移動します。遅れてから、フォーカスされたタブがアクティブになります。スペースフォーカスされたタブに関連するコンテンツパネルを開きます。ENTERフォーカスされたタブに関連するコンテンツパネルを開いたり閉じたりします。UP前のタブにフォーカスを移し、アクティブにします。DOWN次のタブにフォーカスを移し、アクティブにします。コンテンツパネルがフォーカスされている場合、下記のキーコマンドが利用可能なります。CTRL+UPコンテンツパネルに紐付いているタブにフォーカスを移します。UP前のタブにフォーカスを移し、アクティブにします。DOWN次のタブにフォーカスを移し、アクティブにします。次のようにして、ダイアログを呼び出します。);</script>すぐにダイアログを表示したくない場合は、下記のようにautoOpen:falseを指定します。);});</script>ダイアログを閉じたい場合は、下記のように指定します。初期値:0どのパネルを開いておくかを指定します。Booleanfalseを指定すると、全てのパネルが閉じられた(たたまれた)状態になります。これを行うためには、collapsibleオプションをtrueに指定する必要があります。Integer0始まりの番号でアクティブにしておくパネルを指定します。マイナスの値を指定すると、最後のパネルからカウントします。型:null(1.9でbeforeLoadイベントが導入されたため、非推奨になりました。型:Boolean初期値:false(1.9でbeforeLoadイベントが導入されたため、非推奨になりました。型:Object初期値:null(1.9で非推奨になりました。property.collapsible型:Boolean初期値:falsetrueを指定すると、アクティブなパネルであっても閉じることが出来るようになります。Array初期値:falseタブを無効化します。Boolean全てのタブを対象にします。Array無効化したいタブを0始まりの番号で配列に指定します。[0,2]と指定した場合、1つ目と3つ目のタブが無効化されます。event型:String初期値:"click"タブに反応して欲しいイベントを指定します。hoverの際にアクティブにしたければ、"mouseorver"を指定します。型:String初期値:"content"タブとパネルの高さを制御します。"auto"全てのパネルは最も高いパネルの高さになります。"fill"タブの親要素を基準に可能な限りの高さで展開されます。"content"それぞれのパネルはそれぞれの内容に合わせて高さ調節されます。Object初期値:nullパネルの非表示をアニメーションさせるか、またどのようにアニメーションさせるかを決定します。Booleanfalseをセットすると、アニメーションせず即座に非表示になります。trueをセットすると初期値に設定されているdurationとeasingでフェードアウトします。Number指定した数値をdurationとしてフェードアウトします。easingは初期値が使用されます。String指定したエフェクトのアニメーションでパネルを非表示にします。jQueryUIエフェクトである"fold"のようなアニメーション名を指定できます。どちらの場合も、durationとeaingは初期値が使用されます。easingのプロパティが提供されます。プロパティのeffectは上記のStringを、durationはNumberをそれぞれ指定したことになります。//1秒(1000ミリ秒)かけて、explodeのエフェクトアニメーションで非表示になります。型:String初期値:"ui-tabs-"(1.9でrefreshメソッドが導入されたため、非推奨になりました。型:String初期値:"<div></div>"(1.9でrefreshメソッドが導入されたため、非推奨になりました。Object初期値:nullパネルの非表示をアニメーションさせるか、またどのようにアニメーションさせるかを決定します。Booleanfalseをセットすると、アニメーションせず即座に表示されます。trueをセットすると初期値に設定されているdurationとeasingでフェードインします。Number指定した数値をdurationとしてフェードインします。easingは初期値が使用されます。String指定したエフェクトのアニメーションでパネルを表示します。jQueryUIエフェクトである"fold"のようなアニメーション名を指定できます。どちらの場合も、durationとeaingは初期値が使用されます。easingのプロパティが提供されます。プロパティのeffectは上記のStringを、durationはNumberをそれぞれ指定したことになります。型:String初期値:"<em>Loading&#8230;</em>"(1.9で非推奨になり、代わりにbeforeLoadイベントとloadイベントで処理を行うことが推奨されています。href="#{href}"><span>#{label}</span></a></li>"(1.9でrefreshメソッドが導入されたため、非推奨になりました。)1.9非推奨1.10削除(1.9でrefreshメソッドが導入されたため、非推奨になりました。);destroy()ダイアログの機能を完全に削除します。);disable()タブを無効化します。disable(index)タブを無効化します。選択されているタブを無効化することは出来ません。1度の処理で複数のタブを無効化したい場合は、disabledオプションを使用してください。String無効化したいタブを指定します。enable()タブを有効にします。enable(index)タブを有効にします。String有効化したいタブを指定します。一度で複数のタブを無効化状態から有効化したい場合、下記のようにdisabledオプションを使用します。戻り値:Integer(1.9で非推奨になりました。pane.load(index)離れたタブのコンテンツパネルをロードします。Stringロードしたいタブを選択します。)戻り値:ObjectoptionNameに指定したオプションの現在の値を取得します。optionName型:String取得したいオプションの名前を指定します。option()戻り値:PlainObjectオプションの各キーと値がペアとなったオブジェクトを返します。)引数のoptionNameのオプションに値を設定します。optionName型:String設定したいオプションの名前を指定します。value型:Object設定したい値を指定します。)オプションに設定したい各キーと値がペアとなったオブジェクトを指定します。option型:Object設定したいオプションのキーと名前のペアを指定します。refresh()1.9追加DOMの直接の操作で追加または削除をされ、タブパネルの高さが再計算されたタブを処理します。結果はコンテンツとheightStyleオプションに依存します。1.9非推奨1.10削除(1.9でrefreshメソッドが導入されたため、非推奨になりました。)1.9削除(1.9で削除されました。user.select(index)1.9非推奨1.10削除(1.9で非推奨になりました。tab.widget()戻り値: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非アクティブになったパネルです。型: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非アクティブになったパネルです。)型:tabsbeforeloadタブがロードされる際、beforeActivateのイベント後にトリガされます。タブパネルにコンテンツをロードすることを、キャンセルすることで防ぐことができます。パネルはアクティブ化されたままになりますが。ui.jqXHRとui.ajaxSettingsを介して変更することが可能です。ui.tab型:jQueryロードするタブです。ui.panel型:jQueryAjaxのレスポンを受け入れるパネルです。ui.jqXHR型:jqXHRコンテンツをリクエストしているjqXHRオブジェクトです。ui.ajaxSettings型:ObjectjQuery.ajaxのリクエストに設定として、使用されているオブジェクトです。型:tabscreateタブが生成された際にトリガされます。タブパネルが全て折りたたまれている場合、ui.tabとui.panelは空のjQueryオブジェクトになります。ui.tab型:jQueryアクティブなタブです。ui.panel型:jQueryアクティブなパネルです。型:tabsdisable(1.9で他のUIと一貫性を持たせるため、非推奨になりました。型:tabsenable(1.9で他のUIと一貫性を持たせるため、非推奨になりました。)型:tabsloadダイアログのドラッグが開始される際にトリガされます。ui.tab型:jQueryロードしているタブです。ui.panel型:jQueryAjaxのレスポンを受け入れるパネルです。