在JQuery UI窗口小部件中访问.selector

问题描述：

我正在使用 ui小部件工厂开发插件.使用基本的JQuery插件，我可以通过执行以下操作来访问选择器...

I'm working on a plugin using the ui widget factory. With a basic JQuery plugin, I can access the selector used by doing something like this...

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

但是，当我使用窗口小部件工厂时，通过'this.element'属性访问所选元素，并且'this.element.selector'的工作方式与第一个示例不同.有人有解决这个问题的好方法吗?我正在查看GitHub上的小部件工厂源代码，但还没有找到任何东西.

However, when I use the widget factory, the selected element is accessed through the 'this.element' property, and 'this.element.selector' does not work the same way as in my first example. Anyone have a nice way around this? I'm looking through the widget factory source code on GitHub, but I haven't been able to find anything yet.

答

诀窍在于，在小部件工厂完成创建小部件之后，此后它实际上只是一个普通的插件.这意味着您可以进一步扩展它.

The trick is that after the widget factory has completed creating your widget, it is essentially just a normal plugin afterwards. That means you can further extend it.

这个想法是保存原始功能，将其替换为自定义功能，并使其通过选择器.此代码可以在小部件工厂之后以及首次使用对象之前的任何位置.只需在调用$.widget()之后将其放入您的插件文件中即可.

The idea is to save the original function, replace it with a custom function and make it pass the selector through. This code can be anywhere after the widget factory and before you use your object the first time. Just put it in your plugin file after calling $.widget().

在此示例中，小部件的名称为test.

The name of the widget in this example is 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在工厂中的任何位置访问它.

This makes sure that this.selector is passed through as a named option. Now you can access it anywhere within your factory by referencing this.options.selector.

另外，我们不需要破解任何jQuery UI代码.

As an added plus, we didn't need to hack any jQuery UI code.

在JQuery UI窗口小部件中访问.selector

相关推荐