如何从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源代码或编写一个丑陋的黑客.

(我只是注意到这个问题大约有一年了,提问者可能不再有这个问题了.但是我已经写了上面所有的东西,并且认为没有发布这个问题并不坏.)