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
が、この構文を維持して機能させることができれば、非常にクールです。これを実現するためにウィジェットを変更する方法はありますか?