来自 美高梅4858永利777 2019-12-26 04:15 的文章
当前位置: 美高梅游戏平台网站 > 美高梅4858永利777 > 正文

jQueryUI如何自定义组件实现代码_jquery_脚本之家

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

原文

zoom in zoom out

b

如何开始使用 首先用$.widget()方法开始定义你的组件,它只接收三个参数:第一个是组件名称,第二个是可选的基类组件,第三个是组件的原型。 组件名称必须包含命名空间,要注意的是,官方组件的命名空间是以‘ui'开头的,比如:‘ui.tabs'。我在下面的用‘我'的拼音。 复制代码 代码如下: $.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 { return returnValue; } 实际上,jQueryUI Widget还是保留了原始的API,比如这样使用: 复制代码 代码如下: var $div = $; var api = $div.data; // console.dir; // 对比 $div.divZoom; 一个实现完全私有变量的小技巧: 复制代码 代码如下: { var privateVar = ''; $.widget("wo.divZoom",{}); }) 所有代码 复制代码 代码如下: /* * @by ambar * @create 2010-10-20 * @update 2010-10-25 */ { var html = '

a

'; $.widget("wo.divZoom",{ _init : function() { var self = this, opt = self.options, tgt = opt.target, $el = self.element ; // 初始一次 if($.length) return; $el.append; self.target = ( tgt == '' ? $el : $el.find; // 检测初始值 var level = self.target.attr; self.target.attr(opt.dataPrefix,level || opt.level[0]); self.btnZoomIn = $el.find.click( $.proxy; self.btnZoomOut = $el.find.click( $.proxy; }, destroy : function(){ this.element.find.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; return $.inArray; }, zoomIn : function() { this.zoom + 1); }, zoomOut : function() { this.zoom - 1); }, zoom : function{ 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; if return; $tgt.animate(style, { duration : opt.speed, step : function { var css = { width:val, height:val }; self._trigger('zooming',null,$.extend; }, complete : function(){ $tgt.attr; self._trigger; } }); } }); }) 在页面上调用 复制代码 代码如下:

jQueryUI

本文由美高梅游戏平台网站发布于美高梅4858永利777,转载请注明出处:jQueryUI如何自定义组件实现代码_jquery_脚本之家

关键词: