提供了编程的基础技术教程

zl程序教程

您现在的位置是：首页 >  工具

当前栏目

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

组件代码 实现 如何 自定义 JQueryUI
2023-06-13 09:14:25 时间
如何开始使用
首先用$.widget()方法开始定义你的组件，它只接收三个参数：第一个是组件名称，第二个是可选的基类组件（默认的基类是$.Widget），第三个是组件的原型。
组件名称必须包含命名空间，要注意的是，官方组件的命名空间是以‘ui"开头的，比如:‘ui.tabs"。我在下面的用‘我"的拼音(‘wo")。
复制代码代码如下:

$.widget("yourNamespace.yourWidgetName",[yourBaseWidget],yourWidgetPrototype)

$.Widget基类含有一个重要的属性‘options"，它用来定义公有参数，组件初始化时外部调用的参数会覆盖内部定义的参数；以及三个重要的私有的方法‘_create"、‘_init"、‘"，前两个相当于构造函数的作用，按顺序执行，_create()方法执行之后会触发"create"事件。_trigger()方法会将参数中的指定函数标准化为W3C事件，并且触发这个自定义事件。
另外还有三个公有方法‘enable"，‘disable"，‘destroy"，分别表示启用、禁用和销毁组件。
这里很有意思的，是私有方法和公有方法的实现。jQuerUIWidget暴露的方法都是不以‘_"开头的：
复制代码代码如下:

//preventcallstointernalmethods
if(isMethodCall&&options.charAt(0)==="_"){
returnreturnValue;
}

实际上，jQueryUIWidget还是保留了原始的API，比如这样使用：
复制代码代码如下:
var$div=$(".demo:first");
varapi=$div.data("divZoom");
//console.dir(api);
api.zoomIn();
//对比
$div.divZoom("zoomIn");

一个实现完全私有变量的小技巧：
复制代码代码如下:
(function($){
varprivateVar="";
$.widget("wo.divZoom",{});
})(jQuery)

所有代码
复制代码代码如下:
/*
*@byambar
*@create2010-10-20
*@update2010-10-25
*/
(function($){
varhtml="<divclass="icon-zoom">\
<spantitle="zoomin"class="zoom-in">zoomin</span>\
<spantitle="zoomout"class="zoom-out">zoomout</span>\
</div>";
$.widget("wo.divZoom",{
_init:function(){
varself=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));
//检测初始值
varlevel=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(){
varself=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){
varself=this,opt=self.options,lvls=opt.level,$tgt=self.target;
if(i<=-1||i>=lvls.length)return;
varvalue=lvls[i],
originalValue=lvls[self.currentLevel()],
style={width:value,height:value};
vardata={target:$tgt,css:style,originalCss:{width:originalValue,height:originalValue}};
vargoon=self._trigger("start",null,data);
if(!goon)return;
$tgt.animate(style,
{
duration:opt.speed,
step:function(val){
varcss={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)

在页面上调用
复制代码代码如下:
<scriptsrc="js/jquery-1.4.4.min.js"></script>
<scriptsrc="js/jquery.ui.widget.js"></script>
<!--自定义的-->
<scriptsrc="js/jquery.ui.wo.divZoom.js"></script>
<scripttype="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>

示例代码：
复制代码代码如下:
<!DOCTYPEHTML>
<htmllang="en-US">
<head>
<metacharset="UTF-8">
<title>jQueryUI</title>
<styletype="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-zoomspan{width:20px;display:block;text-indent:-999em;float:left;}
</style>
<!--<scriptsrc="js/jquery.ui.core.js"></script>


<scriptsrc="jquery-1.4.4.min.js"></script>
<scriptsrc="jquery.ui.widget.js"></script>
<!--自定义的-->
<scriptsrc="jquery.ui.wo.divZoom.js"></script>


<scripttype="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>
<ahref="http://www.cnblogs.com/ambar/archive/2010/11/12/how-to-user-jquery-ui-widget.html">原文</a>
</p>
<divid="receptacle">
<divclass="demodemo-a">
<aclass="cont"href="#a">a</a>
</div>
<divclass="demodemo-b">
<aclass="cont"href="#b">b</a>
</div>
</div>
</body>
</html>

相关文章