jQueryUI がコンポーネント実装をカスタマイズする方法 code_jquery

開始方法
まず $.widget() メソッドを使用してコンポーネントの定義を開始します。このメソッドは 3 つのパラメーターのみを受け取ります。1 つ目はコンポーネント名、2 つ目はオプションの基本クラス コンポーネント (デフォルトの基本クラスは $.Widget)、3 番目のクラスはコンポーネントのプロトタイプです。
コンポーネント名には名前空間が含まれている必要があります。公式コンポーネントの名前空間は「ui.tabs」のように「ui」で始まることに注意してください。以下では「我」（「を」）のピンインを使用します。

コードをコピー コードは次のとおりです:

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

$.Widget 基本クラスには、パブリック パラメーターの定義に使用される重要な属性 'options' が含まれており、コンポーネントの初期化時に、外部から呼び出されるパラメーターがオーバーライドされます。内部定義されたパラメータ、および 3 つの重要なプライベート メソッド「_create」、「_init」、および「''」があります。最初の 2 つはコンストラクタの関数に相当し、「create」イベントが順番に実行されます。 _create()メソッドが実行されます。 _trigger() メソッドは、パラメーターで指定された関数を W3C イベントとして標準化し、このカスタム イベントをトリガーします。
「enable」、「disable」、「destroy」という 3 つのパブリック メソッドもあり、それぞれコンポーネントの有効化、無効化、破棄を表します。
ここで非常に興味深いのは、プライベート メソッドとパブリック メソッドの実装です。 jQuerUI Widget によって公開されるメソッドは「_」で始まっていません:

コードをコピー コードは次のとおりです:

// 内部メソッドの呼び出しを禁止します
if ( isMethodCall && options.charAt( 0 ) === "_" ) {
return returnValue;

実際、jQueryUI Widget は元の API を保持しています。たとえば、次のように使用できます。

コードをコピー コードは次のとおりです:

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


完全にプライベートを実装するためのちょっとしたトリック変数:

コードをコピー コードは次のとおりです: (function($) {

var privateVar = '';

$.widget("wo.divZoom",{})
})(jQuery)


すべてのコード

コードをコピーします コードは次のとおりです:

/*
* @by ambar
* @create 2010-10-20
* @update 2010-10-25
*/
(function($) {
var html = '

zoom in ズームアウト

'
$.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.ズームアウト').click( $.proxy(self.zoomOut,self) );
},
destroy : function(){
this.element.find('div.icon-zoom' ).remove();
}、
オプション: {
レベル: [120,160,200]、
ターゲット: ''、
速度: '通常'、
データプレフィックス: 'データ-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 = { 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)


在页面上调用

复制代

代码如下:

例代:




复制代

例以下:

原文> ;

a

b