Lập trình jQuery UI như ExtJS

Question

Tôi đang cố gắng phát triển một lớp trừu tượng cho jQuery UI cho phép xác định Widgets là các đối tượng giống như (hoặc tương tự) với ExtJS. Đây là khái niệm:

var mydialog = new $.ui.dialog({ 

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


}); 

Bây giờ tôi có thể nói:

mydialog.show(); 

Bước đầu tiên (tôi nghĩ) là để thêm một chức năng tạo Class để jQuery, điều này cho phép để làm cho các lớp học:

$.MYNAMESPACE.dialog = $.Class ({ 

constructor:function(){} 

//methods and properties 

}); 

Và ở đây có vấn đề thực sự: Những gì tôi phải đặt bên trong định nghĩa lớp trước để liên kết $ .ui.dialog thực với của tôi? Điều tôi muốn nói là tôi không muốn tạo một widget mới, tôi chỉ muốn sử dụng lại mã đằng sau các tiện ích con UI UI được xác định trước để tạo ra một lớp trừu tượng cho phép OOP với jQuery UI.

Cảm ơn trước

Answer 1

bạn đã thử nhà máy sản xuất tiện ích jquery-ui chưa? Bạn có thể được tái phát minh ra wheel.js

slideshow vào những gì bạn nhận được với các nhà máy phụ tùng

official splash page và api

ý tưởng nhanh chóng những gì nó làm. Tôi muốn một hộp thoại mới có một số sự kiện tùy chỉnh trên đó

//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. 
}