Question

当使用jQueryUi小部件（对话框，日期选择器等）时，我总是想知道是否有更好的方法将小部件包装在某种包装类中。这是一种方法，但我不确定这是不是很好的做法。

请发表评论

CODE

包装'对话'的小插件。

//Widget Wrapper plugin POC.
//Should be extended to support all Methods on all Widgets in jQueryUI   
(function ($) {
    $.fn.ww = function (uiWidgetName, options) {
    if (this.length == 1) {
        return new wrappers[uiWidgetName](this[0], options);
    }
}


var wrappers= {};

wrappers.dialog = function (element, options) {
    var theWidget = $(element);
    theWidget.dialog(options);

    this.open = function () {
        theWidget.dialog('open');
    }
    this.close = function () {
        theWidget.dialog('close');
    }
  }

} (jQuery))

这可以像这样使用

var a = $("#WrapperTest").ww('dialog',{ autoOpen: false });            
a.open();

Answer 1

实际上，jQuery UI（在你的情况下是$.fn）添加到$.fn.dialog()命名空间的函数是围绕每个小部件方法的已经包装。

看起来你想在现有的dialog()包装器周围实现某种“反向包装”，以便能够直接访问小部件的方法。添加另一层开销不是必需的，因为您只需要直接调用窗口小部件的构造函数，指定窗口小部件选项和目标元素：

var dialogWidget = new $.ui.dialog({
    autoOpen: false
}, $("#WrapperTest")[0]);

然后你可以做以下事情：

dialogWidget.open();
dialogWidget.close();
dialogWidget.option("autoOpen", !dialogWidget.option("autoOpen"));
// and so on.

如果您以“通常”的方式（通过$.fn.dialog()）创建了一个对话框，并且想要获得对其小部件实例的引用，则可以从元素的{{3}中获取它。使用小部件的名称作为键：

$("#WrapperTest").dialog({
    autoOpen: false
});

var dialogWidget = $("#WrapperTest").data("dialog");
dialogWidget.open();

您可以在data。

中测试上面的代码

更新： 从jQuery UI 1.9开始，this fiddle。因此，上面的代码变为：

var dialogWidget = $("#WrapperTest").data("ui-dialog");
dialogWidget.open();

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

我想评论一下在jQuery中包装小部件的方法

1 个答案: