【www.gdgbn.com--jquery】

首先用$.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 = "
zoom in
zoom out
";
$.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/网页特效">
$(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>

示例代码：
复制代码 代码如下:







<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>

原文

a


b

本文来源：http://www.gdgbn.com/wangyezhizuo/27951/