如何从jquery-ui对话框派生自定义小部件

Question

我想构建一个jquery-ui小部件，但我不确定如何处理这个问题。

小部件将管理jQueryUI对话框中托管的一些数据的状态。

我应该建立一个自定义小部件，在小部件创建函数中为小部件目标添加一些元素，然后调用我的小部件目标上的对话框小部件。

或者

有没有办法从jQuery UI的对话框继承，只是重写它的内容的一部分？

Answer 1

有延长其他部件的方式：

$.widget("ui.customwidget", $.ui.dialog, { 
    options: { 
     // your options 
    }, 

    _create: function() { 
     $.ui.dialog.prototype._create.apply(this); 
     // constructor 
    }, 

    destroy: function() { 
     // destructor 
     $.ui.dialog.prototype.destroy.apply(this); 
    }, 

    _setOption: function(key, value) { 
     $.ui.dialog.prototype._setOption.apply(this, arguments); 
     // process the setting of options 
    } 
    // other methods 
}); 

但是我不鼓励使用它在一个对话框，滑块等，因为如buttonset依赖于按钮小部件的存在，并且将（并且可以）不识别该元素是否是扩展按钮的小部件的实例。因此它只是创建新的纯按钮小部件，导致布局和DOM混乱。覆盖小部件也很关键：小部件的扩展机制在很久以前就被引入，当时一些小部件已经存在。他们的开发人员并没有考虑到这一点，所以可能仍然存在问题。 我汇总我的小部件（您的第一个选项）：只需扩展$.Widget并将该元素设置为对话框即可。然后为需要在对话框和您的自定义小部件之间同步的属性添加事件侦听器。

$.widget("ui.customwidget", $.Widget, { 
    // ... 
    _create: function() { 
     $.Widget.prototype._create.apply(this); 
     this.element.dialog(); 
    } 
    // ... 
}); 

这种方式比扩展其他小部件（除了你构建父项并知道你在做什么）更健壮，但它也有缺点。例如。你是否也接受设置聚合小部件的选项，或只是部分？或者你没有做这些，强制用户调用对话框来处理你的自定义小部件中没有处理的所有内容？我更喜欢第二种选择：至少是诚实的，因为你的小部件并不承诺它不能容纳的东西，但它也很难看，因为你可能曾经称过一个，然后是另一个部件。

我对我的解决方案仍然不满意，但是扩展小部件让我面对一大堆新问题，他们的解决方案可能是修补jQuery UI源代码或写一个丑陋的黑客。

（我刚刚注意到这个问题是一岁左右，提问者可能不再有这个问题了，但我已经写了所有以上的东西，认为没有那么坏，不会发布）