jQuery UIのTabsいろいろ

Tabsのオプション的なものをいくつか試す。

参考：http://jqueryui.com/
なお、シンプルなTabsのサンプルは前回の「jQuery UIで作るメニューあれこれ」で触れたので割愛

コンテンツの開閉

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

collapsible: trueで展開中のタブを再度クリックするとタブが閉じる。

マウスオーバーでの展開

$( "#tabs" ).tabs({
  event: "mouseover"
});

event: "mouseover"でポインタを乗せるとタブが開くようになる。

タブのソート

var tabs = $( "#tabs" ).tabs();
tabs.find( ".ui-tabs-nav" ).sortable({
  axis: "x",
  stop: function() {
    tabs.tabs( "refresh" );
  }
});

タブに指定した要素の子要素の.ui-tabs-navをソート対象とする。
ちなみにこの.ui-tabs-navはjQuery UIでtabsを使ったら子要素のulに自動で付加される。
中身の説明として、
axis: "x"…横方向のドラッグ＆ドロップのみに制限
stop: function()～…ドロップしたときの挙動の設定（上記の場合、タブのドロップ場所に応じてソートしリフレッシュ）

垂直のタブをつくる

$( "#tabs" ).tabs().addClass( "ui-tabs-vertical ui-helper-clearfix" );
$( "#tabs li" ).removeClass( "ui-corner-top" ).addClass( "ui-corner-left" );

jQuery UI側で水平タブに使用していたクラスをremoveClassで取り除き、垂直タブに必要なクラスをaddClassで足す。
多少力技感が否めないけれど参考サイトでも１カテゴリとして存在していたので参考までに。

タブは思った以上に利用したくなる機会があるのでこの辺は覚えておこうと思いました。