jQuery UIにおいて、1.10.xへのバージョンアップの際にタブ機能やアコーディオン機能を中心に、様々な仕様変更がなされているようです。この記事では特に、タブ機能のselectイベントの削除について話します。

1.10.xにおけるタブ機能の仕様変更は、jQuery UIの公式サイトによれば以下のとおりです。(公式英語記事へのリンク)

引用: http://jqueryui.com/upgrade-guide/1.10/


selectイベントが削除されて、代わりにbeforeActivate関数を使うように仕様変更された旨が説明されています。


今までのjQuery UIでは#tabsをタブ化する場合は、selectイベントを以下のように設定していました。


$('#tabs').tabs({
    select: function (event, ui) {
        ui.tab;   // 選択されたタブのアンカーへのDOMオブジェクト
        ui.panel; // 選択されたタブのコンテンツ部分のDOMオブジェクト
        ui.index; // 選択されたタブのインデックス(開始番号は0)
    }
});


これを以下のように書き換えれば同様の動作を実現出来ます。ただし、ui.newTabはタブのアンカーではなくタブ自身になった点と、ui.newTabとui.newPanelは共にDOMオブジェクトではなくjQueryオブジェクトに変更されている点に注意が必要です。


$('#tabs').tabs({
    beforeActivate: function (event, ui) {
        ui.newTab;   // 従来のjQuery(ui.tab).parent()
        ui.newPanel; // 従来のjQuery(ui.panel)
        ui.newTab.index(); // 従来のui.index

        // 以下追加
        ui.oldTab;   // 現在アクティブなタブのjQueryオブジェクト
        ui.oldPanel; // 現在アクティブなタブのコンテンツ部分の〃
    }
});


その他の変更については、先程も掲載した、jQuery UI 1.10における変更点の公式ドキュメントをご参照ください。

タグ ：
#jQuery_UI
#jQuery