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

来自Widget Factory wiki post：

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

jQuery.widget（“namespace.widgetname”， / *可选 - 从 / 继承的现有小部件原型 ，/ 一个对象文字成为小部件的原型* / {...}）;

第二个（可选）参数是要继承自的窗口小部件原型。   例如，jQuery UI有一个“鼠标”插件，其余部分   交互插件是基于。为了达到这个目的，可以拖延，   droppable等都继承自鼠标插件，如下所示：   jQuery.widget（“ui.draggable”，$ .ui.mouse，{...}）;如果你不   提供此参数，小部件将直接从“基础”继承   小部件，“jQuery.Widget（注意小写”W“之间的区别”   jQuery.widget和大写的“W”jQuery.Widget）。

调用扩展jquery小部件的方法

1 个答案: