使用重新定义父方法在 Jquery UI 中扩展小部件

Question

我尝试根据documentation（UI 版本 1.8.16）扩展 UI 对话框：

(function($) {
    $.widget('ui.mydialog', $.extend(true, $.ui.dialog.prototype, {
        _create: function() {
            return $.Widget.prototype._create.apply(this, arguments);
        }
    }));
})(jQuery);

$(function() {
    $('div#dialog').mydialog();
});

执行此代码会导致 JS 错误：“this.uiDialog is undefined”。

如果尝试重写 _init() 方法没有错误，但父方法调用无效。

我很困惑..哪种方式可以合法扩展例如放一些自定义初始化代码？

Answer 1

我认为这篇文章会解决你的问题：Inherit from jQuery UI dialog and call overridden method。

简而言之，如果你想构建一个继承 jQuery UI Dialog 的小部件，你可以这样做：

(function($) {
    $.widget("ui.mydialog", $.ui.dialog, {
        _create: function() {
            $.ui.dialog.prototype._create.call(this);
        }
    });

})(jQuery);

查看实际操作：http://jsfiddle.net/william/RELxP/。

---

本教程将启发你：http://wiki.jqueryui.com/w/page/12138135/Widget%20factory。简而言之，$.Widget 是基本的小部件对象。即使它有一个_create 函数，默认情况下它什么也不做，将初始化代码留给子类。看看这个更新的例子：http://jsfiddle.net/william/RELxP/1。

Answer 2

从 jQuery 1.9 及更高版本开始，如果您想向小部件添加功能并且不想替换现有功能，请在执行代码后调用父方法。为此，您可以简单地这样做，而不是 William Niu 建议的那样：

_create: function()
{
    // Custom code here

    // Call the _create method of the widget
    this._super();
}

这适用于所有现有方法。 （例如_setOption、_trigger 等）

Answer 3

我发布了一个使用 Widget 工厂扩展 jQueryUI 对话框的简单示例。

http://jsfiddle.net/Artistan/jWUGZ/

这个例子扩展了一个对话框来创建一个简单的加载模式。