如何擴展現有的jQuery UI小部件？

Question

我正在使用jQuery v1.8.3和jQuery UI v1.9.2。我想擴展現有的jQuery UI小部件（在我的情況下是Autocomplete小部件），只需添加和覆蓋一些選項和方法，但保留其他功能與正式版本中的功能相同。我怎樣才能做到「正確」（或許是「標準」）？

---

P.S.：我在網上搜索（1,2，...），我發現文檔主要與創建一個新的 jQuery UI小部件，但不擴展現有的。

Answer 1

在jQuery UI 1.9+中，擴展小部件的方式與創建新小部件的方式相同。微件工廠（$.widget()）支撐有幾個可能性：

使用鹼微件（$.Widget）爲出發點創建新的小窗口：

$.widget("ns.widget", { ... })

創建新的小部件，從現有的插件繼承：

$.widget("ns.widget", $.ns.existingWidget, { ... })

擴展一個小部件：

$.widget("ns.widget", $.ns.widget, { ... })

您會注意到擴展語法和繼承語法是相同的。這個widget工廠足夠聰明，可以注意到你正在創建的部件和你繼承的部件是相同的，並且適當地處理它。

當繼承或擴展小部件時，您只需要定義要更改或添加的內容。基礎小部件上還存在一些新的方法，以便更容易地使用改變上下文的繼承和方法。閱讀jQuery.Widget documentation以獲取完整的方法及其描述。如果你要擴展一個小部件，你一定要閱讀_super()。

下面是將默認delay選項更改爲500並添加新的選項prefix被添加到所有建議的例子：

$.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); 
    }, 
});