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。

（我只是注意到这个问题大约有一年了，提问者可能不再有这个问题了。但是我已经写了上面所有的东西，并且认为没有被贴出来也不错。）

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

1 个答案: