Javascript 像ExtJS一样编程jqueryui
我正在尝试为jQueryUI开发一个抽象层,它允许将小部件定义为与ExtJS类似的对象。这是一个概念:Javascript 像ExtJS一样编程jqueryui,javascript,jquery,jquery-ui,class,abstraction,Javascript,Jquery,Jquery Ui,Class,Abstraction,我正在尝试为jQueryUI开发一个抽象层,它允许将小部件定义为与ExtJS类似的对象。这是一个概念: var mydialog = new $.ui.dialog({ modal:true, renderTo:'body', title:'The Windows Tittle', content:'The content of the Window' }); 现在我可以说: mydialog.show(); 第一步(我认为)是向jQuery添加一个类创建函数,这允许创建类: $.MY
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和我的?我的意思是,我不想创建一个新的小部件,我只想重用预定义jQueryUI小部件背后的代码,以便创建一个允许使用jQueryUI进行OOP的抽象层
提前感谢您试用过jquery ui小部件工厂吗?您可能正在重新发明wheel.js 关于小部件工厂的内容 和 快知道它在做什么。我想要一个有一些自定义事件的新对话框
//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.
}
哎哟,为什么投反对票?