jQueryUI에서 구성 요소 구현 코드를 사용자 정의하는 방법

어떻게 사용하는지 우선 $을 사용하십시오.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) 
  
 
 

페이지에서 호출

 
  
 
  
 
  
 
  
 
  
 
  <br>$(function() { 
  <br>$('div.demo').divZoom({ 
  <br>target : '>a', 
  <br>level : [80,120,160,200], 
  <br>zooming : function(e,ui){ 
  <br>// console.log(e,ui.css); 
  <br>}, 
  <br>start : function(e,ui){ 
  <br>console.log('  ',this,e.type,ui); 
  <br>}, 
  <br>stop : function(e,ui) { 
  <br>console.log('  ',ui.css); 
  <br>} 
  <br>}); 
  <br>}); 
  <br> 
  
 
 

코드 예:

 
  
 
  
 
  
 
  
 
  
 
  
 
  
 
  
 
  
 
  
 
  
 
  <br>$(function() { 
  <br>$('div.demo').divZoom({ 
  <br>target : '>a', 
  <br>level : [80,120,160,200], 
  <br>zooming : function(e,ui){ 
  <br>// console.log(e,ui.css); 
  <br>}, 
  <br>start : function(e,ui){ 
  <br>console.log('  ',this,e.type,ui); 
  <br>}, 
  <br>stop : function(e,ui) { 
  <br>console.log('  ',ui.css); 
  <br>} 
  <br>}); 
  <br>}); 
  <br> 
  
 
  
 
  
 
  
원문 
  
 
  
 
  
 
  
a 
  
 
  
 
  
b