jQuery UI タブの選択イベント

別館サイトの jQuery ライブラリをアップデートした際に、jQuery UI タブが期待通りに動作しなくなったのですが、実務でも対応する必要がでたので対処方法を紹介します。

タブが選択された時のイベント処理で何かをする場合は jQuery UI 1.10 より以前のバージョンではこのように出来ていました。
ここでは例として jqGrid を再読み込みしています。

$("#tabs").tabs({
    select: function(event, ui) {
        if (ui.index == 0) {
            $("#grid1").trigger("reloadGrid");
        } else if (ui.index == 1) {
            $("#grid2").trigger("reloadGrid");
        }
    },
    heightStyle: "fill"
});

これを、以下のように変更します。

$("#tabs").tabs({
    activate: function(event, ui) {
        var index = ui.newTab.index();
        if (index == 0) {
            $("#grid1").trigger("reloadGrid");
        } else if (index == 1) {
            $("#grid2").trigger("reloadGrid");
        }
    },
    heightStyle: "fill"
});

select イベントは activate になり
ui.index は ui.newTab.index() 関数となっています。

動作確認:
http://www.northwind.mydns.jp/samples/tab_sample2.php

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください