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 更新、またはその他の外部イベント)。

それでは、ウィジェット インスタンスにアクセスする最良の方法は何でしょうか? 1つの方法は、ウィジェットへの参照を要素に追加することです.

_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 に答える
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 に答える