如何扩展现有的jQuery UI小部件？ [英] How to extend an existing jQuery UI widget?

问题描述

我正在使用jQuery v1.8.3和jQuery UI v1.9.2。我想通过添加和覆盖来扩展现有的jQuery UI小部件（在我的情况下是自动完成小部件）一些选项和方法，但保持官方发布中的其他功能。我怎样才能做出正确的（也许是标准）方式？

I am using jQuery v1.8.3 and jQuery UI v1.9.2. I would like to extend an existing jQuery UI widget (in my case the Autocomplete widget) by adding and overriding just some options and methods but keeping the others functionalities as those present in the official release. How can I make that the "proper" (maybe, the "standard") way?

PS ：我在网上搜索（ 1 ， 2 ，...）我发现文档主要与创建新的 jQuery UI小部件相关，但不是扩展现有的一个。

P.S.: I searched on the Web (1, 2, ...) and I found documentation mostly related to creating a new jQuery UI widget but not to extending an existing one.

推荐答案

在jQuery UI 1.9+中，扩展窗口小部件的方式与创建新窗口小部件的方式相同。小部件工厂（ $ .tidget（））支持以下几种情况：

In jQuery UI 1.9+, extending a widget is done in the same manner as creating a new widget. The widget factory ($.widget()) supports a few scenarios:

使用基础创建新小部件小部件（ $。小部件）作为起点：

Creating a new widget using the base widget ($.Widget) as the starting point:

$ .tidget（ ns.widget，{...}）

创建一个继承自现有小部件的新小部件：

Creating a new widget that inherits from an existing widget:

$ .tidget（ns.widget，$。ns.existingWidget，{...}）

扩展小部件：

$ .tidget（ns.widget，$。ns.widget， {...}）

您会注意到扩展语法和继承语法是相同的。小部件工厂非常聪明，可以注意到您正在创建的小部件和您继承的小部件是相同的并且处理得恰当。

You'll notice that the extending syntax and the inheritance syntax are the same. The widget factory is smart enough to notice that the widget you're creating and the widget you're inheriting from are the same and handle it appropriately.

继承或扩展时小部件，您只需要定义要更改或添加的内容。基本窗口小部件上还存在一些新方法，以便更轻松地使用继承和更改上下文的方法。阅读 jQuery.Widget文档，获取完整的方法列表及其说明。如果你要扩展的话，你肯定想读懂 _super（）一个小部件。

When inheriting or extending a widget, you only need to define what you want to change or add. There are also a few new methods that exist on the base widget to make it easier to work with inheritance and methods that change context. Read the jQuery.Widget documentation for a full list of methods and their descriptions. You'll definitely want to read about _super() if you're extending a widget.

这是一个将默认延迟选项更改为 500 <的示例/ code>并添加一个新选项前缀，该选项已添加到所有建议中：

Here's an example that would change the default delay option to 500 and add a new option prefix which is added to all suggestions:

$.widget( "ui.autocomplete", $.ui.autocomplete, {
    options: {
        delay: 500,
        prefix: ""
    },

    _renderItem: function( ul, item ) {
        var label = item.label;
        if ( this.options.prefix ) {
            label = this.options.prefix + " " + label;
        }
        return $( "<li>" )
            .append( $( "<a>" ).text( label ) )
            .appendTo( ul );
    },
});

这篇关于如何扩展现有的jQuery UI小部件？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！