调用扩展jquery小部件的方法

I have a jquery widget like this:

我有一个像这样的jquery小部件:

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

And, i am extending it like this:

而且,我正在扩展它:

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

I have to call the "myNewMethod" in my html.

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

My html code is like this:

我的HTML代码是这样的:

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

I am getting exception like this while using the above code cannot call methods on TimeSpanHeader prior to initialization; attempted to call method 'myNewMethod'

我这样得到异常,而使用上面的代码在初始化之前无法在TimeSpanHeader上调用方法;试图调用方法'myNewMethod'

What is the way to call the "myNewMethod" method?

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

1 个解决方案

#1

The widget factory provides a way to extend from an existing widget with $.widget constructor:

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

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

Note: The constructor will take care of extending the options as well. This is the method used in the jQuery UI library itself. For instance, the widget ui.mouse has options and a lot of the other widgets inherits from it and have their own extra options along with the ones from ui.mouse.

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

DEMO

From the Widget Factory wiki post:

来自Widget Factory wiki帖子:

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

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

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

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

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).

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

#1