jquery - 扩展jquery widget的调用方法

Question

我有一个像这样的 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”方法？

Answer 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 的选项。

<强> DEMO

<小时/>

来自小部件工厂 wiki post :

The widget factory is a simple function on the global jQuery object - jQuery.widget - that accepts 2 or 3 arguments.

jQuery.widget("namespace.widgetname", /* optional - an existing widget prototype to inherit from /, / An object literal to become the widget's prototype*/ {...} );

The second (optional) argument is a widget prototype to inherit from. For instance, jQuery UI has a "mouse" plugin on which the rest of the interaction plugins are based. In order to achieve this, draggable, droppable, etc. all inherit from the mouse plugin like so: jQuery.widget( "ui.draggable", $.ui.mouse, {...} ); If you do not supply this argument, the widget will inherit directly from the "base widget," jQuery.Widget (note the difference between lowercase "w" jQuery.widget and uppercase "W" jQuery.Widget).