Programmierung von jQuery UI wie ExtJS

Question

Ich versuche, eine Abstraktionsschicht zu jQuery UI zu entwickeln, die Widgets wie Objekte ähnlich (oder ähnlich) wie ExtJS definieren kann. Dies ist das Konzept:

var mydialog = new $.ui.dialog({ 

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


}); 

Jetzt kann ich sagen:

mydialog.show(); 

Der erste Schritt (glaube ich) war eine Klasse Erstellungsfunktion zu jQuery hinzuzufügen, diese erlauben Klassen zu machen:

$.MYNAMESPACE.dialog = $.Class ({ 

constructor:function(){} 

//methods and properties 

}); 

Und hier kommt das eigentliche Problem: Was muss ich in die vorherige Klassendefinition einfügen, um den realen $ .ui.dialog mit meinem zu verknüpfen? Was ich damit meinte ist, dass ich kein neues Widget erstellen möchte, sondern den Code hinter vordefinierten jQuery UI Widgets wiederverwenden möchte, um eine Abstraktionsschicht zu erstellen, die OOP mit jQuery UI ermöglicht.

Vielen Dank im Voraus

Answer 1

haben Sie versucht, die jquery-ui-Widget Fabrik? Sie könnten neu zu erfinden das wheel.js

slideshow auf, was Sie mit dem Widget-Fabrik erhalten

official splash page und der api

schnelle Idee, was es tut. Ich möchte einen neuen Dialog mit einigen benutzerdefinierten Ereignissen darauf

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