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

Question

我想构建一个 jquery-ui 小部件，但我不确定解决此问题的最佳方法。

小部件将管理托管在 jquery-ui 对话框内的一些数据的状态。

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

或者

有没有办法从 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 源代码，要么是编写一个丑陋的 hack。

（我刚刚注意到这个问题大约有一年了，提问者可能不再有这个问题了。但是我已经写了上面的所有内容，并且认为不发布也不错。）