2

我有一个这样的 jquery 小部件：

$.widget("ui.MyWidget", {
              options: {            
            Value1: 10,
            Value1: 20,
        },
// and other methods like _create,...
});

而且，我正在像这样扩展它：

$.widget("ui.MyExtWidget", $.extend({
            options: {
            Value3: 20,
        }}, $.ui.MyWidget.prototype, {
        myNewMethod: function(){
            alert(this.options.Value1+this.options.Value3);
        }
}

我必须在我的 html 中调用“myNewMethod”。

我的html代码是这样的：

$("#Div1").MyExtWidget();
$("#Div1").MyExtWidget("myNewMethod");

我在使用上述代码时遇到这样的异常，在初始化之前无法调用 TimeSpanHeader 上的方法；试图调用方法“myNewMethod”

调用“myNewMethod”方法的方法是什么？

4

1 回答 1

1

小部件工厂提供了一种使用构造函数从现有小部件扩展的方法$.widget：

$.widget("ui.MyExtWidget", $.ui.MyWidget, {
    options: {
        alertText: ''
    },
    myNewMethod: function() {
        alert('Value1 = ' + this.options.Value1);
        alert('alertText = ' + this.options.alertText);
    }
});

注意：构造函数也将负责扩展选项。这是 jQuery UI 库本身使用的方法。例如，小部件ui.mouse具有选项，并且许多其他小部件都继承自它，并且具有自己的额外选项以及来自 ui.mouse 的选项。

演示

来自 Widget Factory wiki 帖子：

小部件工厂是全局 jQuery 对象 jQuery.widget 上的一个简单函数，它接受 2 或 3 个参数。

jQuery.widget("namespace.widgetname", /* 可选 - 从/继承的现有小部件原型, /成为小部件原型的对象文字*/ {...} );

第二个（可选）参数是要继承自的小部件原型。例如，jQuery UI 有一个“鼠标”插件，其余的交互插件都基于该插件。为了实现这一点，draggable、droppable 等都继承自鼠标插件，如下所示： jQuery.widget( "ui.draggable", $.ui.mouse, {...} ); 如果您不提供此参数，小部件将直接从“基本小部件”jQuery.Widget 继承（注意小写“w”jQuery.widget 和大写“W”jQuery.Widget 之间的区别）。

于 2012-01-21T13:31:04.187 回答