JqueryUI的Weiget写法
- jQueryUI的Weiget写法
(function ($) {
// utils fuction
function foo() {}
$.widget('命名空间.插件名', $.继承插件的命名空间.插件名,{
/* snip */
//public方法首字符不是_
//private方法首字符是_
});
})(jQuery);
- jQueryUI的Weiget的使用方法
var instance = $('<div>');
instance.mywidget('publicFunction'); // work
instance.mywidget('_privateFunction'); // silently fail
instance.data('mywidget')._privateFunction(); // work
$.mynamespace.mywidget.prototype._privateFunction(); // work
- jQueryUI的Weiget的options
//定义options
options: {
field1: 'default',
function1: function () {
console.log('default option function1');
}
//调用options中的option
$('#id').jformCommands('option','isInput',true);
jQueryUi的Weiget 的默认构建方法
_createWidget: function( options, element ) {
element = $( element || this.defaultElement || this )[ 0 ];
this.element = $( element );
this.uuid = widgetUuid++;
this.eventNamespace = "." + this.widgetName + this.uuid;
//.....这里忽略
this.options = $.widget.extend( {},
this.options,
this._getCreateOptions(),
options );
this._create();
if ( this.options.disabled ) {
this._setOptionDisabled( this.options.disabled );
}
this._trigger( "create", null, this._getCreateEventData() );
this._init();
}
所以编写 jquery ui widget时默认需要实现_create
,_init
,_destory
方法
jQueryUi 是怎么把weiget扩展到$.fn上的
//Widget中的定义写法
$.widget=function(name,base,prototype){
var namespace = name.split( "." )[ 0 ];
name = name.split( "." )[ 1 ];
var fullName = namespace + "-" + name;
//忽略
$.widget.bridge( name, constructor );
return constructor;
}
//具体的$.widget.bridge实现
$.widget.bridge = function( name, object ) {
var fullName = object.prototype.widgetFullName || name;
$.fn[ name ] = function( options ) {
//忽略 .....
return returnValue;
};
};