ExtJSのようなjQuery UIのプログラミング

Question

私はExtJSと似た（または同様の）オブジェクトとして定義ウィジェットを可能にする抽象レイヤーをjQuery UIに開発しようとしています。これがコンセプトです：

var mydialog = new $.ui.dialog({ 

modal:true, 
renderTo:'body', 
title:'The Windows Tittle', 
content:'The content of the Window' 


}); 

今、私が言うことができます：

mydialog.show(); 

最初のステップは、（私は思う）これは、クラスを行うことができ、jQueryのにクラスの作成機能を追加しました：

$.MYNAMESPACE.dialog = $.Class ({ 

constructor:function(){} 

//methods and properties 

}); 

ここで本当の問題が発生します：実際の$ .ui.dialogを私のものとリンクさせるために前のクラス定義の中に入れなければならないことはありますか？私が意味することは、新しいウィジェットを作成したくないということです。あらかじめ定義されたjQuery UIウィジェットの背後にあるコードを再利用して、jQuery UIでOOPを可能にする抽象レイヤーを作成したいだけです。

ありがとうございます。

Answer 1

jquery-ui widget factoryを試しましたか？あなたがウィジェット工場

official splash pageと得るものにwheel.js

slideshowを再発明し、それはやっているものをapi

迅速な考えかもしれません。カスタムイベントを含む新しいダイアログが必要です

//this is instantiating the widget, does not need to be in the same file 
$(function(){ 
    $(".some-selector").miDialog({autoopen:true //because we can}); 
}); 
//this is a definition, not an instantiation of the widget. aka, 
$.widget("mi.miDialog" //namespace 
    ,$.ui.dialog //inherit from this jquery widget 
    ,//start your widget definition 
{ options:{autoopen:false,//overwrite parent default option, while still giving instance option to override our definition's override of parent 
    someInstanceSafeOption: {why:"not",have:"a",subobject:"option"} }, 
//underscore functions are 'private' unless you dig into the prototype manually 
_create :function(){ 
//you'll need this function. guaranteed to run once. 
// upcoming version call parent create 
this._super(); 
//current version call parent create 
$.ui.dialog.prototype._create(this.options); 
this.element.addClass("mi-dialog"); //help with custom styling 
    this._trigger("created"); //trigger custom events 
//register for events here, as _create() will only run once per individual instance 

}, 
_init:function(){ 
//this will run every time someone calls $('some-selector').miDialog(); 
//i have yet to use it much 
}, 
publicFunction: function(some, params){ 
//this function does whatever you want, and is called $('some-selector'.miDialog("publicFunction", some,params); 
}, 
_destroy: function(){ 
//clean up after your widget's create function, if needed. 
}