1

OOP Javascript、jQuery、および jQuery UI をすべて同時に理解しようとしています。基本的に、Web アプリのさまざまな場所で再利用できるカスタム「パネル」コンポーネントを作成したいと考えています。パネルは、タイトル バーとその下のコンテンツで構成されます。

だから私はこれを達成するために jQuery UI を使用しています。コンポーネントを作成してから、その属性 (タイトル バーのテキストなど) を変更できるようにしたいと考えています。次に例を示します。

$(function()
{
    $.widget("custom.ShinyPanel",
    {
        options: {
            css:{},
            title:""
        },

        _create:function()
        {
            $(this.element).addClass("shinyPanel").disableSelection();
            this.titleBar = $(createElement("div")).addClass("shinyPanelTitleBar").appendTo(this.element);
            this.topShine = $(createElement("div")).addClass("shinyPanelTopShine").appendTo(this.element);
            this.leftShine = $(createElement("div")).addClass("shinyPanelLeftShine").appendTo(this.element);
            this.content = $(createElement("div")).addClass("shinyPanelContent").appendTo(this.element);

            this._refresh();
        },

        _refresh:function()
        {
            if (this.options.hasOwnProperty("title"))
                $(this.titleBar).html(this.options.title);
        }
    });
});

// $("#divShotList").ShinyPanel({title:"Shot List"});    // this works
$("#divShotList").ShinyPanel();
$("#divShotList").title = "Shot List";                   // this doesn't work


<div id="divShotList" style="position:absolute; top:5px; bottom:10px; width:250px;"></div>

=この構文でこれを機能させるために、演算子または何かをオーバーロードする方法はありますか? おそらく追加の関数を作成できることはわかっていますsetPropertyが、この構文を維持して機能させることができれば、非常にクールです。これを実現するためにウィジェットを変更する方法はありますか?

4

1 に答える 1