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 相关文章推荐
input+select(multiple) 实现下拉框输入值
May 21 Javascript
关于this和self的使用说明
Aug 01 Javascript
javascript错误的认识不用关心内存管理
Dec 15 Javascript
『JavaScript』限制Input只能输入数字实现思路及代码
Apr 22 Javascript
jQuery之自动完成组件的深入解析
Jun 19 Javascript
原生javascript和jquery判断浏览器版本等信息
Jul 04 Javascript
JQuery设置文本框和密码框得到焦点时的样式
Aug 30 Javascript
JS通过分析userAgent属性来判断浏览器的类型及版本
Mar 28 Javascript
js输出数据精确到小数点后n位代码
Jul 02 Javascript
基于JS实现回到页面顶部的五种写法(从实现到增强)
Sep 03 Javascript
node使用UEditor富文本编辑器的方法实例
Jul 11 Javascript
在vue中利用v-html按分号将文本换行的例子
Nov 14 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
BBS(php &amp; mysql)完整版(五)
2006/10/09 PHP
用PHP中的 == 运算符进行字符串比较
2006/11/26 PHP
PHPwind整合最土系统用户同步登录实现方法
2010/12/08 PHP
小谈php正则提取图片地址
2014/03/27 PHP
php防止sql注入之过滤分页参数实例
2014/11/03 PHP
PHP正则匹配到2个字符串之间的内容方法
2018/12/24 PHP
jQuery dialog 异步调用ashx,webservice数据的代码
2010/08/03 Javascript
一个轻量级的javascript库 pj介绍
2010/12/19 Javascript
常用一些Javascript判断函数
2012/08/14 Javascript
文本域中换行符的替换示例
2014/03/04 Javascript
JQuery中serialize()、serializeArray()和param()方法示例介绍
2014/07/31 Javascript
node.js中的fs.renameSync方法使用说明
2014/12/16 Javascript
JavaScript 学习笔记之操作符(续)
2015/01/14 Javascript
javascript截图 jQuery插件imgAreaSelect使用详解
2016/05/04 Javascript
AngularJS实现按钮提示与点击变色效果
2016/09/07 Javascript
JAVA Web实时消息后台服务器推送技术---GoEasy
2016/11/04 Javascript
jQuery完成表单验证的实例代码(纯代码)
2017/09/30 jQuery
JS运算符简单用法示例
2020/01/19 Javascript
selenium 反爬虫之跳过淘宝滑块验证功能的实现代码
2020/08/27 Javascript
Python内存管理方式和垃圾回收算法解析
2017/11/11 Python
详解python string类型 bytes类型 bytearray类型
2017/12/16 Python
Python生成任意范围任意精度的随机数方法
2018/04/09 Python
Python JSON格式数据的提取和保存的实现
2019/03/22 Python
Python实现socket非阻塞通讯功能示例
2019/11/06 Python
python sorted方法和列表使用解析
2019/11/18 Python
基于django 的orm中非主键自增的实现方式
2020/05/18 Python
Pycharm修改python路径过程图解
2020/05/22 Python
使用CSS3实现一个3D相册效果实例
2016/12/03 HTML / CSS
Ticketmaster意大利:音乐会、节日、艺术和剧院的官方门票
2019/12/23 全球购物
如何删除一个表里面的重复行
2013/07/13 面试题
社区维稳工作方案
2014/06/06 职场文书
最美护士演讲稿
2014/08/27 职场文书
党员四风问题对照检查材料
2014/09/27 职场文书
夫妻婚内购房协议书
2014/10/05 职场文书
计划生育诚信协议书
2014/11/02 职场文书
苹果电脑mac os中货币符号快捷输入
2022/02/17 杂记