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


Posted in Javascript onNovember 14, 2010

如何开始使用
首先用$.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(//img.jbzj.com/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="js/jquery.ui.core.js"></script> 
<script src="jquery-1.4.4.min.js"></script> 
<script src="jquery.ui.widget.js"></script> 
<!-- 自定义的 --> 
<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>
Javascript 相关文章推荐
通过jquery实现tab标签浏览效果
Feb 20 Javascript
javascript脚本调试方法小结
Nov 24 Javascript
jQuery 获取对象 根据属性、内容匹配, 还有表单元素匹配
May 31 Javascript
20款超赞的jQuery插件 Web开发人员必备
Feb 26 Javascript
js实现的点击div区域外隐藏div区域
Jun 30 Javascript
深入理解JavaScript系列(30):设计模式之外观模式详解
Mar 03 Javascript
Javascript中浏览器窗口的基本操作总结
Aug 18 Javascript
javascript-解决mongoose数据查询的异步操作
Dec 22 Javascript
JavaScript cookie详解及简单实例应用
Dec 31 Javascript
js验证手机号、密码、短信验证码代码工具类
Jun 24 Javascript
JS验证字符串功能
Feb 22 Javascript
解决vue2中使用elementUi打包报错的问题
Sep 22 Javascript
Jquery常用技巧收集整理篇
Nov 14 #Javascript
为radio类型的INPUT添加客户端脚本(附加实现JS来禁用onClick事件思路代码)
Nov 11 #Javascript
有关DOM元素与事件的3个谜题
Nov 11 #Javascript
入门基础学习 ExtJS笔记(一)
Nov 11 #Javascript
JavaScript类型转换方法及需要注意的问题小结(挺全面)
Nov 11 #Javascript
javascript正则表达式中参数g(全局)的作用
Nov 11 #Javascript
工作中常用到的JS表单验证代码(包括例子)
Nov 11 #Javascript
You might like
PHP 调试工具Debug Tools
2011/04/30 PHP
PHP SPL标准库之文件操作(SplFileInfo和SplFileObject)实例
2015/05/11 PHP
php版阿里云OSS图片上传类详解
2016/12/01 PHP
Discuz论坛密码与密保加密规则
2016/12/19 PHP
Javascript与vbscript数据共享
2007/01/09 Javascript
Raphael一个用于在网页中绘制矢量图形的Javascript库
2013/01/08 Javascript
JavaScript异步编程:异步数据收集的具体方法
2013/08/19 Javascript
Jquery焦点图实例代码
2014/11/25 Javascript
JS实现点击复选框将按钮或文本框变为灰色不可用的方法
2015/08/11 Javascript
jQuery文字横向滚动效果的实现代码
2016/05/31 Javascript
Node.js中路径处理模块path详解
2016/11/14 Javascript
详解JavaScript中数组的reduce方法
2016/12/02 Javascript
详解ES6中的三种异步解决方案
2018/06/28 Javascript
JS实现根据指定值删除数组中的元素操作示例
2018/08/02 Javascript
解决layui table表单提示数据接口请求异常的问题
2019/09/24 Javascript
JS实现进度条动态加载特效
2020/03/25 Javascript
利用H5api实现时钟的绘制(javascript)
2020/09/13 Javascript
[01:12:27]EG vs Secret 2018国际邀请赛淘汰赛BO3 第二场 8.22
2018/08/23 DOTA
在Python中封装GObject模块进行图形化程序编程的教程
2015/04/14 Python
Python字符串替换实例分析
2015/05/11 Python
Python实现将罗马数字转换成普通阿拉伯数字的方法
2017/04/19 Python
Python和C/C++交互的几种方法总结
2017/05/11 Python
python实战教程之自动扫雷
2018/07/13 Python
Python实现将通信达.day文件读取为DataFrame
2018/12/22 Python
python 列表、字典和集合的添加和删除操作
2019/12/16 Python
Python logging模块写入中文出现乱码
2020/05/21 Python
Python中socket网络通信是干嘛的
2020/05/27 Python
CSS3制作翻转效果_动力节点Java学院整理
2017/07/11 HTML / CSS
CSS3制作酷炫的三维相册效果
2016/07/01 HTML / CSS
销售主管岗位职责范本
2014/02/14 职场文书
国庆节演讲稿
2014/05/27 职场文书
党建工作整改措施
2014/10/28 职场文书
护士长2014年终工作总结
2014/11/11 职场文书
大卫科波菲尔读书笔记
2015/06/30 职场文书
Go使用协程交替打印字符
2021/04/29 Golang
vue响应式原理与双向数据的深入解析
2021/06/04 Vue.js