jQueryUI가 구성요소 구현을 사용자 정의하는 방법 code_jquery

시작하는 방법
먼저 세 개의 매개변수만 받는 $.widget() 메서드를 사용하여 구성 요소 정의를 시작합니다. 첫 번째는 구성 요소 이름이고 두 번째는 선택적 기본 클래스 구성 요소( 기본 기본 클래스는 $.Widget)이고, 세 번째 클래스는 컴포넌트의 프로토타입입니다.
구성 요소 이름에는 네임스페이스가 포함되어야 합니다. 공식 구성 요소의 네임스페이스는 'ui.tabs'와 같이 'ui'로 시작한다는 점에 유의해야 합니다. 아래에서는 '我'('wo')의 병음을 사용합니다.

코드 복사 코드는 다음과 같습니다.

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

$.Widget 기본 클래스에는 공용 매개변수를 정의하는 데 사용되는 중요한 속성 '옵션'이 포함되어 있습니다. 내부적으로 정의된 매개변수와 세 가지 중요한 전용 메소드 '_create', '_init' 및 ''가 있습니다. 처음 두 개는 생성자의 기능과 동일하며 'create' 이벤트가 실행됩니다. _create() 메소드가 실행됩니다. _trigger() 메소드는 매개변수에 지정된 함수를 W3C 이벤트로 표준화하고 이 사용자 정의 이벤트를 트리거합니다.
각각 구성 요소 활성화, 비활성화 및 파괴를 나타내는 세 가지 공개 메소드 'enable', 'disable' 및 'destroy'도 있습니다.
여기서 매우 흥미로운 점은 프라이빗 메소드와 퍼블릭 메소드의 구현입니다. jQuerUI Widget이 노출하는 메소드는 '_'으로 시작하지 않습니다.

코드 복사 코드는 다음과 같습니다.

// 내부 메소드 호출 방지
if ( isMethodCall && options.charAt( 0 ) === "_" ) {
return returnValue;

실제로 jQueryUI 위젯은 원래 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
*/
(함수($) {
var html = '

확대 축소

'
$.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();
},
옵션 : {
레벨 : [120,160,200],
대상 : '',
속도 : '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=lvls.length ) return;
var value = lvls[i],
originalValue = lvls[self.currentLevel()],
style = { 너비:값, 높이:값 };
var data = { 대상 : $tgt, css : 스타일, originalCss : {width:originalValue,height:originalValue} };
var goon = self._trigger('start',null,data);
if(!goon) return;
$tgt.animate(style,
{
기간 : opt.speed,
단계 : 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)

현재

复代码 代码如下:

示例代码：

复代码 代码如下:

원문> ;

a

b