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 Dialog的简单示例。

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

此示例扩展了一个对话框以创建一个简单的加载模式。

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

3 个答案: