独自にメソッドを追加する

jQuery UI は便利なGUIコンポーネントがいっぱいあって、どれも使いやすいのだけど、jQuery UI Tabs(http://jqueryui.com/demos/tabs/) に一点気に食わない点があったので独自にメソッドを追加してみました。

何が気に食わないかと言うと、現在選択中のタブを取得する方法がないことです。それらしきメソッドはドキュメントの

3.1 ...retrieve the index of the currently selected tab

で解説されているんだけど、インデックスがわかるだけで、タブのjQuery Elementを取得する方法が用意されていない。うーむ、何で取得できないのかね・・。取得できてしまうと何かマズイのか？凡人の私には想像もつかない深遠な理があるのだろう・・。

ま、そんなこと気にしない私は以下のようにして、現在選択中のタブを取得するメソッドを追加してみました。

$(function()
{
    $.extend($.ui.tabs.prototype,
    {
        getUI: function(index)
        {
            return this._ui(this.anchors[index], this.panels[index]);
        },

        getNowUI: function()
        {
            var o = this.options;
            return (o.selected === -1 ) ? null : this.getUI(o.selected);
        }
    }
});

そうすれば、以下のようにして何かのボタンを押したときに現在のタブの内容を表示することができます。

$("#btn").click( function()
{
    var ui = $("#tabs").tabs("getNowUI");
    alert(ui.panel.innerHTML);
});