ご存知のように、ボタンはボタンです...クリック、アップ、ダウン、これを行い、あれを行います。そこで、デフォルトのボタン動作「クラス/オブジェクト」をいくつか書きました。
外部デフォルト button.js:
function Button(parent) {
var self = this;
this.enabled = true;
this.visible = true;
...
this.initialized = false;
f_createButton(parent, self);
this.initialized = true;
...
}
Button.prototype = {
get initialized () {
return this._initialized;
},
set initialized(bool){
this._initialized = bool
if(this.initialized === true) {
... do default stuff
}
},
get enabled(){
return this._enabled;
},
set enabled(bool){
this._enabled = bool;
if(document.getElementById(this.id)) { // is button defined?
var mClassName = document.getElementById(this.id).children[0].className;
document.getElementById(this.id).className = (this.enabled === false) ? "button button-Gray_disabled" : "button button-" + this.defaultStyle;
document.getElementById(this.id).children[0].className = (this.enabled === false) ? mClassName + "_disabled" : mClassName.replace("_disabled","");
}
}
}
function f_createButton("", obj) {
.... create DOM element
}
html に button.js を含め、ボタンの「クラス/オブジェクト」を拡張します。
Object.defineProperty(Button.prototype,"buttonStyle", {
get : function() {
return this._buttonStyle;
},
set : function(str) {
this._buttonStyle = str;
if(this.id !== "undefined" && document.getElementById(this.id)) { // is button defined?
document.getElementById(this.id).style.backgroundImage = 'url(Images/'+this.buttonStyle+'/buttons.png)';
}
}
});
これはほとんど機能しますが、初期化された元の Button を強制終了します。
Object.defineProperty(Button.prototype,"initialized", {
set : function( bool ) {
this._initialized = bool;
if(this.initialized === true) {
this.buttonStyle = "NONE";
}
}
});
元のセッターを拡張するにはどうすればよいですか?