Question

这是一个简单的小部件模拟：

(function ($) {

    $.widget("ui.myDummyWidget", {

        options: {
        },

        _create: function () {
        },
        hide: function () {
            this.element.hide();
        },
        _setOption: function (key, value) {
            $.Widget.prototype._setOption.apply(this, arguments);
        },

        destroy: function () {
            $.Widget.prototype.destroy.call(this);
        }

    });

} (jQuery));

它只添加了一个隐藏元素的方法隐藏。如果从小部件

中完成，则很容易

this.hide();

但常见的情况是你想从外部调用窗口小部件实例上的方法（Ajax更新或其他外部事件）

那么访问小部件实例的最佳方式是什么？一种方法是将小部件的引用添加到元素中，丑陋......

_create: function () {
    this.element[0].widget = this;
},

然后你可以从外面进行访问

this.dummy = $("#dummy").myDummyWidget();
this.dummy[0].widget.hide();

Answer 1

小部件引擎已经做了你想做的事情：它在内部调用data()来关联小部件及其各自的元素：

$("#dummy").myDummyWidget();
// Get associated widget.
var widget = $("#dummy").data("myDummyWidget");
// The following is equivalent to $("#dummy").myDummyWidget("hide")
widget.hide();

更新： 从jQuery UI 1.9开始，the key becomes the widget's fully qualified name, with dashes instead of dots。因此，上面的代码变为：

// Get associated widget.
var widget = $("#dummy").data("ui-myDummyWidget");

1.9中仍然支持使用非限定名称但不推荐使用，支持将在1.10中删除。

Answer 2

在定义Widget时还会创建一个方法，您可以简单地调用instance方法来获取实际的Widget实例，如下所示：

//Create the Instance
$("#elementID").myDummyWidget(options);

//Get the Widget Instance
var widget = $("#elementID").myDummyWidget("instance");

或者你可以做一个单行：

var widget = $("#elementID").myDummyWidget(options).myDummyWidget("instance");

Answer 3

您还可以使用jQuery自定义选择器在调用它们上的数据之前查找窗口小部件元素，以获取实际的窗口小部件实例，例如。

$(this.element).find(":ui-myDummyWidget").each(function (index, domEle) {
    var widgetObject = $(this).data("myDummyWidget");
    widgetObject.hide();
    // this == domEle according to the jQuery docs
});

该代码找到ui.myDummyWidget的所有实例（注意更改句点。连字符 - ），这些实例已创建并附加到另一个小部件持有者。

Answer 4

我不确定它是在哪个版本中引入的，但是，如果您只想调用小部件的方法，则可以使用它：

$("#myWidget").myDummyWidget("hide");

其中 myWidget 是包含窗口小部件实例的DOM元素的id。这将调用隐藏方法。

如果您需要调用的方法需要参数，您可以在方法名称之后传递它们，如下所示：

$("#myWidget").myDummyWidget("setSpecialAnswer",42);

此外，您可以使用特殊选择器：widgetName 查找窗口小部件的所有实例，并在其上调用方法。以下代码段将在所有 myDummyWidget 小部件上调用 hide 方法。

$(":ui-myDummyWidget").myDummyWidget("hide");

请注意，小部件全名由前缀（＆＃34; ui＆＃34;在示例中）和小部件名称（＆＃34; myDummyWidget＆＃34;）组成，以分数（＆＃34; - ＆＃34;。）

您应该为自定义小部件使用自己的前缀; ＆＃34; UI＆＃34;通常保留用于jQueryUI预构建的小部件。

我希望有所帮助。：）

从外部窗口小部件访问窗口小部件

4 个答案: