How jQueryUI customizes component implementation code_jquery

How to get started
First start defining your component using the $.widget() method, which only receives three parameters: the first is the component name, and the second is the optional base class component (The default base class is $.Widget), and the third one is the prototype of the component.
The component name must include the namespace. It should be noted that the namespace of the official component starts with 'ui', such as: 'ui.tabs'. I use the pinyin of ‘我’ (‘wo’) below.

Copy code The code is as follows:

$.widget("yourNamespace.yourWidgetName",[yourBaseWidget ],yourWidgetPrototype)

$.Widget base class contains an important attribute 'options', which is used to define public parameters. When the component is initialized, the externally called parameters will override the internally defined parameters; and three There are three important private methods '_create', '_init', and ''. The first two are equivalent to the functions of constructors and are executed in order. The 'create' event will be triggered after the _create() method is executed. The _trigger() method will standardize the specified function in the parameter as a W3C event and trigger this custom event.
There are also three public methods 'enable', 'disable', and 'destroy', which respectively represent enabling, disabling and destroying components.
What is very interesting here is the implementation of private methods and public methods. The methods exposed by jQuerUI Widget do not start with '_':

Copy code The code is as follows:

// prevent calls to internal methods
if ( isMethodCall && options.charAt( 0 ) === "_" ) {
return returnValue;
}

In fact, jQueryUI Widget still retains the original API, for example, it can be used like this:

Copy code The code is as follows:

var $div = $('.demo:first');
var api = $div.data('divZoom');
// console.dir(api);
api .zoomIn();
// Comparison
$div.divZoom('zoomIn');

A little trick to implement completely private variables:

Copy code The code is as follows:

(function($) {
var privateVar = '';
$. widget("wo.divZoom",{});
})(jQuery)

All codes

Copy code The code is as follows:

/*
* @by ambar
* @create 2010-10-20
* @update 2010-10-25
*/
(function($) {
var html = '

zoom in
zoom out

';
$.widget("wo.divZoom",{
_init : function() {
var self = this, opt = self.options, tgt = opt.target, $el = self.element ;
// 初始一次
if($('div.icon-zoom',$el).length) return;
$el.append(html);
self.target = ( tgt == '' ? $el : $el.find(tgt) );
// 检测初始值
var level = self.target.attr(opt.dataPrefix);
self.target.attr(opt.dataPrefix,level || opt.level[0]);
self.btnZoomIn = $el.find('span.zoom-in').click( $.proxy(self.zoomIn,self) );
self.btnZoomOut = $el.find('span.zoom-out').click( $.proxy(self.zoomOut,self) );
},
destroy : function(){
this.element.find('div.icon-zoom').remove();
},
options : {
level : [120,160,200],
target : '',
speed : 'normal',
dataPrefix : 'data-zoom-level',
zooming : null,
select : null,
show : null
},
currentLevel : function(){
var self = this, opt = self.options, lvl = Number(self.target.attr(opt.dataPrefix));
return $.inArray(lvl,opt.level);
},
zoomIn : function() {
this.zoom(this.currentLevel() 1);
},
zoomOut : function() {
this.zoom(this.currentLevel() - 1);
},
zoom : function(i){
var self = this, opt = self.options,lvls = opt.level,$tgt = self.target;
if( i<=-1 || i>=lvls.length ) return;
var value = lvls[i],
originalValue = lvls[self.currentLevel()],
style = { width:value, height:value };
var data = { target : $tgt, css : style, originalCss : {width:originalValue,height:originalValue} };
var goon = self._trigger('start',null,data);
if(!goon) return;
$tgt.animate(style,
{
duration : opt.speed,
step : function(val) {
var css = { width:val, height:val };
self._trigger('zooming',null,$.extend({},data,{css:css}));
},
complete : function(){
$tgt.attr(opt.dataPrefix,value);
self._trigger('stop',null,data);
}
});
}
});
})(jQuery)

在页面上调用

复制代码 代码如下:

示例代码：

复制代码 代码如下:

原文

a

b