jQuery UI Widget Factory を使って独自のダイアログを実装してみた

こんばんは、最近は PHP や C# よりも JavaScript ばかり書いてる男です。Visual Web Developer 2010 のおかげでインテリセンスが使えてますが、やっぱりドキュメントコメントは便利ですね。

今日は jQuery UI の話ですが、Project Silk でも取り上げられている内容だったりします。

Chapter 3: jQuery UI Widgets

自分も正直なところ、Project Silk を見るまでは存在すら知らなかったんですが、jQuery UI の各種コンポーネントは Widget Factory を使って作られているらしいです。

jQuery UI Development & Planning Wiki / Widget factory

Wiki にプロトタイプのコードが載ってますので、参考にすれば簡単に独自のコンポーネントは作れそうですね。

しかし、実際のところは既に用意されている UI コンポーネントを拡張して、独自のコンポーネントを作りたいこともあると思います。そんな時には Widget Factory を使えば、既存コンポーネントを継承して新しく作ることが出来るようになっています。オブジェクト指向ですね。

簡単にサンプルとして、コンテンツがスライドダウンして表示されるダイアログを作ってみました。

$.widget("ui.customDialog", $.ui.dialog, {
    // デフォルトの設定をオーバーライド
    options: {
        width: 300,
        height: 200,
        autoOpen: false
    },
    // _create メソッドをオーバーライド
    _create: function() {
        // 継承元の _create メソッドを呼び出す
        $.ui.dialog.prototype._create.apply(this, arguments);

        // コンテンツを入れ替える
        this.element
            .find("p")
            .text("new contents");
    },
    // open メソッドをオーバーライド
    open: function() {
        // 継承元の open メソッドを呼び出す
        $.ui.dialog.prototype.open.apply(this, arguments);

        // 非表示にしてスライド表示
        this.element.hide().slideDown("slow");
    }
});

$.widget の 2 つめの引数に継承したいコンポーネントを指定するという簡単な仕様です。

後はオーバーライドしたいメソッドを定義してあげるだけですが、メソッドを定義してしまうと、継承元のメソッドが完全に隠れてしまいます。このままだと呼び出せないので、継承元のプロトタイプを使って呼び出しています。*1

基本的にオーバーライドしたメソッド内で、元々のメソッドを呼び出しておかないと動作しなくなるので忘れないようにしてください。ちなみに定義されているプロパティとメソッドは

jQuery UI Development & Planning Wiki / Widget factory

に全て載っています。

作成したダイアログの動作は http://jsfiddle.net/shibayan/AXfPN/ で確認できます。インフラが整備されているので、完全に自前で作成するのも簡単そうですね！

*1:jQuery UI 1.9 では _super メソッドが用意されるようです。