_createWidget
:
function( options, element ) {
element = $( element || this.defaultElement || this )[ 0 ];
this.element = $( element );
this.uuid = uuid ++;
this.eventNamespace = "." + this.widgetName + this.uuid;
......
this._create();
this._trigger( "create", null, this._getCreateEventData() );
this._init();
},
element = $( element || this.defaultElement || this )[ 0 ];
this.element = $( element );
this.uuid = uuid ++;
this.eventNamespace = "." + this.widgetName + this.uuid;
......
this._create();
this._trigger( "create", null, this._getCreateEventData() );
this._init();
},
destroy: function() {
this._destroy();
}
编写jquery ui widget时默认需要实现_create,_init,_destroy等方法,以'_'开头的方法是组件的私有方法,其他的为公共方法
示例:
(
function ($, undefined) {
$.widget( "spy.fuck", {
options : {},
/***
* 创建元素时使用
* @private
*/
_create : function () {
console.log( '_create');
console.log( this);
console.log( this.element); //jQuery对象
this.element.css( 'background', 'red');
},
/**
* 初始化
* @private
*/
_init : function () {
console.log( '_init');
},
/**
* 销毁
* @private
*/
_destroy : function () {
console.log( '_destroy');
this.element.css( 'background', 'blue');
},
say : function () {
console.log( 'say method');
alert( 'fuck');
}
})
})(jQuery);
$.widget( "spy.fuck", {
options : {},
/***
* 创建元素时使用
* @private
*/
_create : function () {
console.log( '_create');
console.log( this);
console.log( this.element); //jQuery对象
this.element.css( 'background', 'red');
},
/**
* 初始化
* @private
*/
_init : function () {
console.log( '_init');
},
/**
* 销毁
* @private
*/
_destroy : function () {
console.log( '_destroy');
this.element.css( 'background', 'blue');
},
say : function () {
console.log( 'say method');
alert( 'fuck');
}
})
})(jQuery);
HTML
<!
DOCTYPE
html>
< html>
< head>
< meta http-equiv= "content-type" content= "text/html;charset=UTF-8"/>
< title>jQuery UI 插件原理</ title>
</ head>
< body>
< div id= "fuck" style= "height: 30px"></ div>
< script type= "text/javascript" src= "../../jquery-1.10.2.js"></ script>
< script type= "text/javascript" src= "../../ui/jquery.ui.core.js"></ script>
< script type= "text/javascript" src= "../../ui/jquery.ui.widget.js"></ script>
< script type= "text/javascript" src= "index.js"></ script>
< script type= "text/javascript">
$('#fuck').fuck();
</ script>
</ body>
</ html>
< html>
< head>
< meta http-equiv= "content-type" content= "text/html;charset=UTF-8"/>
< title>jQuery UI 插件原理</ title>
</ head>
< body>
< div id= "fuck" style= "height: 30px"></ div>
< script type= "text/javascript" src= "../../jquery-1.10.2.js"></ script>
< script type= "text/javascript" src= "../../ui/jquery.ui.core.js"></ script>
< script type= "text/javascript" src= "../../ui/jquery.ui.widget.js"></ script>
< script type= "text/javascript" src= "index.js"></ script>
< script type= "text/javascript">
$('#fuck').fuck();
</ script>
</ body>
</ html>