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

如何开始使用首先用$.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 = '<div class="icon-zoom"> <span title="zoom in" class="zoom-in">zoom in</span> <span title="zoom out" class="zoom-out">zoom out</span> </div>'; $.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) 在页面上调用复制代码代码如下: <script src="js/jquery-1.4.4.min.js"></script> <script src="js/jquery.ui.widget.js"></script>  <script src="js/jquery.ui.wo.divZoom.js"></script> <script type="text/javascript"> $(function() { $('div.demo').divZoom({ target : '>a', level : [80,120,160,200], zooming : function(e,ui){ // console.log(e,ui.css); }, start : function(e,ui){ console.log('开始',this,e.type,ui); }, stop : function(e,ui) { console.log('结束',ui.css); } }); }); </script> 示例代码：复制代码代码如下:<!DOCTYPE HTML> <html lang="en-US"> <head> <meta charset="UTF-8"> <title>jQueryUI</title> <style type="text/css"> #receptacle{width:800px;height:500px;background:#cde;position:relative;} #receptacle .demo{width:80px;height:80px;position:absolute;} .demo .cont{width:80px;height:80px;display:block;background:#07a;} .demo-a{top:30px;left:122px;} .demo-b{top:100px;left:400px;} .icon-zoom { position:absolute; width:63px; height:20px; overflow:hidden; background:url(http://files.jb51.net/file_images/photoshop/201011/icon-zoom.png) no-repeat; cursor:pointer; } .icon-zoom span { width:20px; display:block; text-indent:-999em; float:left; } </style>  <script src="jquery.ui.wo.divZoom.js"></script> <script type="text/javascript"> $(function() { $('div.demo').divZoom({ target : '>a', level : [80,120,160,200], zooming : function(e,ui){ // console.log(e,ui.css); }, start : function(e,ui){ console.log('开始',this,e.type,ui); }, stop : function(e,ui) { console.log('结束',ui.css); } }); }); </script> </head> <body> <p> <a href="http://www.cnblogs.com/ambar/archive/2010/11/12/how-to-user-jquery-ui-widget.html">原文</a> </p> <div id="receptacle"> <div class="demo demo-a"> <a class="cont" href="#a">a</a> </div> <div class="demo demo-b"> <a class="cont" href="#b">b</a> </div> </div> </body> </html>

　　推荐阅读

　　基于jquery的自定义鼠标提示效果 jquery.toolTip

IE下效果 Firefox或其它浏览器效果代码复制代码代码如下: //版权酷车中国 www.kuchechina.com //作者逐月 zhuyue.cnblogs.com //演示 http://www.kuchechina.com/carstools/Default.aspx jQuery.fn.toolTip>>>详细阅读

本文标题：jQueryUI如何自定义组件实现代码

地址：http://www.17bianji.com/kaifa2/JS/25453.html

1/2 1