首頁 > web前端 > js教程 > jQueryUI如何自定义组件实现代码_jquery

jQueryUI如何自定义组件实现代码_jquery

WBOY
發布: 2016-05-16 18:16:30
原創
911 人瀏覽過
如何开始使用
首先用$.widget()方法开始定义你的组件,它只接收三个参数:第一个是组件名称,第二个是可选的基类组件(默认的基类是$.Widget),第三个是组件的原型。
组件名称必须包含命名空间,要注意的是,官方组件的命名空间是以‘ui'开头的,比如:‘ui.tabs'。我在下面的用‘我'的拼音(‘wo')。
复制代码 代码如下:

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

$.Widget基类含有一个重要的属性‘options',它用来定义公有参数,组件初始化时外部调用的参数会覆盖内部定义的参数;以及三个重要的私有的方法‘_create'、‘_init'、‘',前两个相当于构造函数的作用,按顺序执行,_create()方法执行之后会触发'create'事件。 _trigger()方法会将参数中的指定函数标准化为W3C事件,并且触发这个自定义事件。
另外还有三个公有方法‘enable',‘disable',‘destroy',分别表示启用、禁用和销毁组件。
这里很有意思的,是私有方法和公有方法的实现。jQuerUI Widget暴露的方法都是不以‘_'开头的:
复制代码 代码如下:

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

实际上,jQueryUI Widget还是保留了原始的API,比如这样使用:
复制代码 代码如下:

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

一个实现完全私有变量的小技巧:
复制代码 代码如下:

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

所有代码
复制代码 代码如下:

/*
* @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=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)

在页面上调用
复制代码 代码如下:







示例代码:
复制代码 代码如下:





jQueryUI









原文




a


b




相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板