編程jQuery UI像ExtJS

Question

我想開發一個jQuery UI的抽象層，它允許像ExtJS一樣（或類似）定義Widgets作爲對象。這是概念：

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的小部件的工廠？你可能會重新發明wheel.js

slideshow你與小部件工廠

official splash page和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. 
}