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 相关文章推荐
关于document.cookie的使用javascript
Apr 11 Javascript
JS 两个字符串时间的天数差计算
Aug 25 Javascript
JavaScript初学者建议:不要去管浏览器兼容
Feb 04 Javascript
完美兼容各大浏览器获取HTTP_REFERER方法总结
Jun 24 Javascript
浅谈JavaScript事件的属性列表
Mar 01 Javascript
深入学习JavaScript中的Rest参数和参数默认值
Jul 28 Javascript
Jquery1.9.1源码分析系列(六)延时对象应用之jQuery.ready
Nov 24 Javascript
jQuery mobile在页面加载时添加加载中效果 document.ready 和window.onload执行顺序比较
Jul 14 Javascript
Bootstrap Table服务器分页与在线编辑应用总结
Aug 08 Javascript
如何给ss bash 写一个 WEB 端查看流量的页面
Mar 23 Javascript
基于vue2.0实现的级联选择器
Jun 09 Javascript
Vue2.0 http请求以及loading展示实例
Mar 06 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文件打包 下载之使用PHP自带的ZipArchive压缩文件并下载打包好的文件
2012/06/13 PHP
PHP网页游戏学习之Xnova(ogame)源码解读(六)
2014/06/23 PHP
php自定义函数实现二维数组按指定key排序的方法
2016/09/29 PHP
php文件类型MIME对照表(比较全)
2016/10/07 PHP
ie下动态加态js文件的方法
2011/09/13 Javascript
js 一个关于图片onload加载的事
2013/11/10 Javascript
小结Node.js中非阻塞IO和事件循环
2014/09/18 Javascript
js格式化时间的方法
2015/12/18 Javascript
Jquery EasyUI实现treegrid上显示checkbox并取选定值的方法
2016/04/29 Javascript
一个超简单的jQuery回调函数例子(分享)
2016/08/08 Javascript
详解Vue的钩子函数(路由导航守卫、keep-alive、生命周期钩子)
2018/07/24 Javascript
jQuery层叠选择器用法实例分析
2019/06/28 jQuery
[09:37]2018DOTA2国际邀请赛寻真——不懈追梦的Team Serenity
2018/08/13 DOTA
[59:15]EG vs LGD 2018国际邀请赛淘汰赛BO3 第一场 8.26
2018/08/29 DOTA
Python常见格式化字符串方法小结【百分号与format方法】
2016/09/18 Python
Python中turtle作图示例
2017/11/15 Python
关于python列表增加元素的三种操作方法
2018/08/22 Python
使用Python编写Prometheus监控的方法
2018/10/15 Python
Python 实用技巧之利用Shell通配符做字符串匹配
2019/08/23 Python
利用python实现周期财务统计可视化
2019/08/25 Python
使用python 的matplotlib 画轨道实例
2020/01/19 Python
利用scikitlearn画ROC曲线实例
2020/07/02 Python
Python3合并两个有序数组代码实例
2020/08/11 Python
Django Admin后台模型列表页面如何添加自定义操作按钮
2020/11/11 Python
python 实现逻辑回归
2020/12/30 Python
全方位了解CSS3的Regions扩展
2015/08/07 HTML / CSS
日本最大的购物网站:日本乐天市场(Rakuten Ichiba)
2020/11/04 全球购物
网友共享的几个面试题关于Java和Unix等方面的
2016/09/08 面试题
金融专业个人求职信
2013/09/22 职场文书
学习“七一”讲话精神体会
2014/07/08 职场文书
挂职学习心得体会
2014/09/09 职场文书
党的群众路线教育实践活动个人对照检查材料范文
2014/09/25 职场文书
教师三严三实学习心得体会
2014/10/11 职场文书
2015年教师节主持词
2015/07/03 职场文书
学生会副主席竞选稿
2015/11/19 职场文书
python3实现常见的排序算法(示例代码)
2021/07/04 Python