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 技巧大全(新手入门篇)
May 12 Javascript
javascript奇异的arguments分析
Oct 20 Javascript
poshytip 基于jquery的 插件 主要用于显示微博人的图像和鼠标提示等
Oct 12 Javascript
js 获取和设置css3 属性值的实现方法
May 06 Javascript
javascript获取元素偏移量的方法有哪些
Jun 24 Javascript
jQuery实现的fixedMenu下拉菜单效果代码
Aug 24 Javascript
Vue.js bootstrap前端实现分页和排序
Mar 10 Javascript
微信小程序实现倒计时60s获取验证码
Apr 17 Javascript
Vue中computed与methods的区别详解
Mar 24 Javascript
微信小程序实现禁止分享代码实例
Oct 19 Javascript
详解小程序如何动态绑定点击的执行方法
Nov 26 Javascript
Js图片点击切换轮播实现代码
Jul 27 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中图片等比缩放的实例
2013/03/24 PHP
php实现可以设置中奖概率的抽奖程序代码分享
2014/01/19 PHP
Yii框架登录流程分析
2014/12/03 PHP
php表单加入Token防止重复提交的方法分析
2016/10/10 PHP
javascript+dom树型菜单类,希望朋友们一起进步
2007/05/03 Javascript
Iframe thickbox2.0使用的方法
2009/03/05 Javascript
jQuery的运行机制和设计理念分析
2011/04/05 Javascript
jQuery $.data()方法使用注意细节
2012/12/31 Javascript
JavaScript作用域链使用介绍
2013/08/29 Javascript
JavaScript中的fontsize()方法使用详解
2015/06/08 Javascript
纯javascript实现的小游戏《Flappy Pig》实例
2015/07/27 Javascript
深入浅析JavaScript中对事件的三种监听方式
2015/09/29 Javascript
javascript实现右下角广告框效果
2017/02/01 Javascript
$.browser.msie 为空或不是对象问题的多种解决方法
2017/03/19 Javascript
BACKBONE.JS 简单入门范例
2017/10/17 Javascript
使用vue-cli打包过程中的步骤以及问题的解决
2018/05/08 Javascript
vue 根据数组中某一项的值进行排序的方法
2018/08/30 Javascript
angular中两种表单的区别(响应式和模板驱动表单)
2018/12/06 Javascript
详解JQuery基础动画操作
2019/04/12 jQuery
vue中的过滤器实例代码详解
2019/06/06 Javascript
浅谈javascript如何获取文件后缀名
2020/08/07 Javascript
python数字图像处理实现直方图与均衡化
2018/05/04 Python
Python采集猫眼两万条数据 对《无名之辈》影评进行分析
2018/12/05 Python
Python中list的交、并、差集获取方法示例
2019/08/01 Python
Python适配器模式代码实现解析
2019/08/02 Python
python中的selenium安装的步骤(浏览器自动化测试框架)
2020/03/17 Python
Python如何省略括号方法详解
2020/03/21 Python
python线性插值解析
2020/07/05 Python
英国领先的男士服装和时尚零售商:Burton
2017/01/09 全球购物
Daniel Wellington官方海外旗舰店:丹尼尔惠灵顿DW手表
2018/02/22 全球购物
IFCHIC台湾:欧美国际设计师品牌
2019/05/18 全球购物
物业客服专员岗位职责
2013/11/30 职场文书
优秀毕业生自我鉴定
2014/01/19 职场文书
python geopandas读取、创建shapefile文件的方法
2021/06/29 Python
mysql使用instr达到in(字符串)的效果
2022/04/03 MySQL
Android学习之BottomSheetDialog组件的使用
2022/06/21 Java/Android