Question

我正在尝试让我的代码更清晰，为此，我非常喜欢JQuery widgets.

今天，我想创建一个与Dom元素无关的小部件：

$.widget('ui.resaWidget', {
    options : {
        viewer : null
    }...
});

我发现调用此小部件的唯一方法是：

$(aDomElement).resaWidget();

有没有办法以这样的方式调用我的小部件：

$.resaWidget()  ?

因为事实上，我的小部件是针对整个页面生成的，而不仅仅是针对单个DOM元素。

顺便说一下，$('body').resaWidget()似乎不起作用。

感谢您的帮助。

Answer 1

有几种方法可以创建jQuery插件。

最常见的是向jQuery.fn添加一个函数（实际上与jQuery.prototype相同）：

(function ($) {
    "use strict";
    $.fn.foo = function (/* function parameters */) {
        this.each(doStuff);
        return this; //makes the function chainable
    };
}(jQuery));

此方法用于添加jQuery个实例上可调用的函数。即：

$(selector).foo();

jQuery UI的小部件工厂是扩展jQuery.fn。

的简便方法

扩展jQuery的另一种常用方法是向jQuery本身添加一个函数：

(function ($) {
    "use strict";
    $.foo = function (/* function parameters */) {
        doStuff();
    };
}(jQuery));

此方法用于从jQuery添加静态可调用函数。即：

$.foo();

jQuery UI的widget工件不能（目前从1.8开始）创建这些静态函数。使用窗口小部件工厂的主要原因是用于上下文保留。如果你有一个没有上下文的静态函数（不需要$()），那么你只需要在函数中编写自己的功能。

Answer 2

我知道这是一个老问题，但是从jQuery UI 1.9开始，您现在可以通过将窗口小部件原型上的defaultElement属性设置为null来创建基于非dom的窗口小部件。

创建不依赖于DOM元素的窗口小部件

2 个答案: