27

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

(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));

它只添加了一个可以调用来隐藏元素的方法 hide。如果从小部件内完成，则很容易

this.hide();

但是一个常见的场景是你想从外部调用一个小部件实例的方法（Ajax 更新，或其他外部事件）

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

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

然后你可以从外部访问它

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

4 回答 4

46

小部件引擎已经做了你想做的事：它在内部调用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 开始，键成为小部件的完全限定名称，用破折号代替点。因此，上面的代码变为：

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

1.9 中仍然支持使用非限定名称，但已弃用，并且将在 1.10 中删除支持。

于 2011-12-14T15:04:03.657 回答
8

还有一个在定义 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");
于 2017-09-29T09:37:36.783 回答
1

您还可以使用 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 实例（注意将句点 . 更改为连字符 - ）。

于 2012-06-25T10:45:09.947 回答
1

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

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

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

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

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

此外，您可以使用特殊选择器:widgetName 查找小部件的所有实例并调用它们的方法。以下代码片段将调用所有myDummyWidget小部件的hide方法。

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

请注意，小部件全名由前缀（示例中的“ui”）和小部件的名称（“myDummyWidget”）组成，并以分数（“-”）分隔。

您应该为自定义小部件使用自己的前缀；“ui”通常保留给 jQueryUI 预构建的小部件。

我希望这会有所帮助。:)

于 2016-02-08T13:47:24.893 回答