jquery - 在 JQuery UI 小部件中访问 .selector

Question

我正在使用 ui widget factory 开发一个插件。使用基本的 JQuery 插件，我可以通过执行以下操作来访问所使用的选择器...

$.fn.pluginname = function(){
    var thisWorks = this.selector;
};

但是，当我使用小部件工厂时，所选元素是通过“this.element”属性访问的，而“this.element.selector”的工作方式与我的第一个示例中的不同。有人有解决这个问题的好方法吗？我正在 GitHub 上查看小部件工厂源代码，但尚未找到任何内容。

Answer 1

诀窍是，在小部件工厂完成创建小部件后，它本质上只是一个普通的插件。这意味着您可以进一步扩展它。

这个想法是保存原始函数，用自定义函数替换它并使其传递选择器。此代码可以位于小部件工厂之后和第一次使用对象之前的任何位置。只需在调用 $.widget() 后将其放入插件文件中即可。

此示例中小部件的名称是 test。

// Save the original factory function in a variable
var testFactory = $.fn.test;

// Replace the function with our own implementation
$.fn.test = function(obj){
    // Add the selector property to the options
    $.extend(obj, { selector: this.selector });

    // Run the original factory function with proper context and arguments
    return testFactory.apply(this,arguments);
};

这确保 this.selector 作为命名选项传递。现在，您可以通过引用 this.options.selector 在工厂内的任何位置访问它。

作为一个额外的优点，我们不需要破解任何 jQuery UI 代码。