_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();
},
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);
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>
