9

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 で OOP を可能にする抽象化レイヤーを作成するために、定義済みの jQuery UI ウィジェットの背後にあるコードを再利用したいだけです。

前もって感謝します

4

1 に答える 1

4

jquery-ui ウィジェット ファクトリを試しましたか? wheel.js を再発明している可能性があります

ウィジェット ファクトリで得られるものに関するスライドショー

公式スプラッシュページと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.
}
于 2013-02-07T22:07:51.157 に答える