LeonKim

$.widget("customWidget.mybutton", {

// default options

options : {

disabled : false,

text : true,

label : "Button"

},

// template css style for mybutton

defaultStyle : {

cursor:"pointer",

padding:"0.4em 1em",

backgroundColor : "gray",

fontWeight : "bolder",

width:"90px",

height:"20px",

},

overStyle : {

cursor:"pointer",

padding:"0.4em 1em",

backgroundColor : "#555555",

fontWeight : "normal",

width:"95px",

height:"23px"

},

disableStyle : {

cursor:"hand",

padding:"0.4em 1em",

backgroundColor : "red",

fontWeight : "normal",

width:"90px",

height:"20px"

},

_create : function() {

// element를 만들고, options에 따른 widget의 정보 세팅 작업을 주로 세팅한다.

this.element.addClass("ui-widget");

this._createBtnNode();

},

_init : function() {

// widget의 최초 상태를 세팅한다.

this._setStyle();

this._eventConnect();

},

_createBtnNode : function(){

this.element.html("<span></span>");

this.element.text(this.options.label);

this.element.css(this.defaultStyle);

},

_eventConnect : function() {

var self = this;

this.element.bind("click.myButton", function(e) {

self._click(e);

});

this.element.bind("mouseenter.myButton", function(e) {

self._mouseenter(e);

});

this.element.bind("mouseleave.myButton", function(e){

self._mouseleave(e);

});

},

_eventConnectKill : function(){

this.element.unbind(".myButton");

},

_click : function(e) {

console.log("_ClickEvent");

},

_mouseenter : function(e) {

this.element.css(this.overStyle);

},

_mouseleave : function(e){

this.element.css(this.defaultStyle);

},

setDisable : function(){

this.options.disable = true;

this._eventConnectKill();

this._setStyle();

},

setEnable : function(){

this.options.disable = false;

this._eventConnect();

this._setStyle();

},

setLabel : function(label){

this.label = label;

},

_setStyle: function(){

if(this.options.disable){

this.element.css(this.disableStyle);

}else{

this.element.css(this.defaultStyle);

}

},

_privateMethod:function(){

console.log("It's private");

},

destroy : function() {

// 자원 반납

$.Widget.prototype.destroy.apply(this, arguments); // default destroy

// now do other stuff particular to this widget

}

});

$.Widget.prototype = {
widgetName: "widget",
widgetEventPrefix: "",
options: {
disabled: false
},
_createWidget: function( options, element ) {
// $.widget.bridge stores the plugin instance, but we do it anyway
// so that it's stored even before the _create function runs
$.data( element, this.widgetName, this );
this.element = $( element );
this.options = $.extend( true, {},
this.options,
this._getCreateOptions(),
options );

var self = this;
this.element.bind( "remove." + this.widgetName, function() {
self.destroy();
});

this._create();
this._trigger( "create" );
this._init();
},
_getCreateOptions: function() {
var options = {};
if ( $.metadata ) {
options = $.metadata.get( element )[ this.widgetName ];
}
return options;
},
_create: function() {},
_init: function() {},

destroy: function() {
this.element
.unbind( "." + this.widgetName )
.removeData( this.widgetName );
this.widget()
.unbind( "." + this.widgetName )
.removeAttr( "aria-disabled" )
.removeClass(
this.widgetBaseClass + "-disabled " +
"ui-state-disabled" );
},

widget: function() {
return this.element;
},

option: function( key, value ) {
var options = key;

if ( arguments.length === 0 ) {
// don't return a reference to the internal hash
return $.extend( {}, this.options );
}

if (typeof key === "string" ) {
if ( value === undefined ) {
return this.options[ key ];
}
options = {};
options[ key ] = value;
}

this._setOptions( options );

return this;
},
_setOptions: function( options ) {
var self = this;
$.each( options, function( key, value ) {
self._setOption( key, value );
});

return this;
},
_setOption: function( key, value ) {
this.options[ key ] = value;

if ( key === "disabled" ) {
this.widget()
[ value ? "addClass" : "removeClass"](
this.widgetBaseClass + "-disabled" + " " +
"ui-state-disabled" )
.attr( "aria-disabled", value );
}

return this;
},

enable: function() {
return this._setOption( "disabled", false );
},
disable: function() {
return this._setOption( "disabled", true );
},

_trigger: function( type, event, data ) {
var callback = this.options[ type ];

event = $.Event( event );
event.type = ( type === this.widgetEventPrefix ?
type :
this.widgetEventPrefix + type ).toLowerCase();
data = data || {};

// copy original event properties over to the new event
// this would happen if we could call $.event.fix instead of $.Event
// but we don't have a way to force an event to be fixed multiple times
if ( event.originalEvent ) {
for ( var i = $.event.props.length, prop; i; ) {
prop = $.event.props[ --i ];
event[ prop ] = event.originalEvent[ prop ];
}
}

this.element.trigger( event, data );

return !( $.isFunction(callback) &&
callback.call( this.element[0], event, data ) === false ||
event.isDefaultPrevented() );
}
};