快捷導(dǎo)航

jQueryUI如何自定義組件實現(xiàn)代碼

更新時間：2010年11月14日 19:24:13 作者：

第一次自定義jQueryUI Widget 又是第一次，現(xiàn)在的感受是jQueryUI Widget能讓你代碼組織得更好,風(fēng)格更一致。

如何開始使用
首先用$.widget()方法開始定義你的組件，它只接收三個參數(shù)：第一個是組件名稱，第二個是可選的基類組件（默認(rèn)的基類是$.Widget），第三個是組件的原型。
組件名稱必須包含命名空間，要注意的是，官方組件的命名空間是以‘ui'開頭的，比如:‘ui.tabs'。我在下面的用‘我'的拼音(‘wo')。

復(fù)制代碼代碼如下:

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

$.Widget基類含有一個重要的屬性‘options'，它用來定義公有參數(shù)，組件初始化時外部調(diào)用的參數(shù)會覆蓋內(nèi)部定義的參數(shù)；以及三個重要的私有的方法‘_create'、‘_init'、‘'，前兩個相當(dāng)于構(gòu)造函數(shù)的作用，按順序執(zhí)行，_create()方法執(zhí)行之后會觸發(fā)'create'事件。 _trigger()方法會將參數(shù)中的指定函數(shù)標(biāo)準(zhǔn)化為W3C事件，并且觸發(fā)這個自定義事件。
另外還有三個公有方法‘enable'，‘disable'，‘destroy'，分別表示啟用、禁用和銷毀組件。
這里很有意思的，是私有方法和公有方法的實現(xiàn)。jQuerUI Widget暴露的方法都是不以‘_'開頭的：

復(fù)制代碼代碼如下:

 
// prevent calls to internal methods 
if ( isMethodCall && options.charAt( 0 ) === "_" ) { 
return returnValue; 
} 

實際上，jQueryUI Widget還是保留了原始的API，比如這樣使用：

復(fù)制代碼代碼如下:

 
var $div = $('.demo:first'); 
var api = $div.data('divZoom'); 
// console.dir(api); 
api.zoomIn(); 
// 對比 
$div.divZoom('zoomIn'); 

一個實現(xiàn)完全私有變量的小技巧：

復(fù)制代碼代碼如下:

 
(function($) { 
var privateVar = ''; 
$.widget(&quot;wo.divZoom&quot;,{}); 
})(jQuery) 

所有代碼

復(fù)制代碼代碼如下:

 
/* 
* @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) 

在頁面上調(diào)用

復(fù)制代碼代碼如下:

 
<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('結(jié)束',ui.css); 
} 
}); 
}); 
</script> 

示例代碼：

復(fù)制代碼代碼如下:

<!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('結(jié)束',ui.css); 
} 
}); 
}); 
</script> 
</head> 
<body> 
<p> 
<a >原文</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>