Jak przedłużyć istniejący widget JQuery UI?

Question

Używam jQuery v1.8.3 i jQuery UI v1.9.2. Chciałbym rozszerzyć istniejący widget JQuery UI (w moim przypadku widget Autocomplete) przez dodanie i przesłonięcie tylko niektórych opcji i metod, ale zachowując inne funkcjonalności, jak te obecne w oficjalnej wersji. Jak mogę uczynić, że "właściwy" (być może "standardowy") sposób?

---

P.S.: Szukałem w Internecie (1, 2, ...) i znalazłem dokumentację głównie związaną z tworząc nowy widget JQuery UI, ale nie rozszerzając istniejącego.

Answer 1

W jQuery UI 1.9+ rozszerzenie widgetu odbywa się w taki sam sposób, jak tworzenie nowego widżetu. Fabryka widget ($.widget()) obsługuje kilka scenariuszy:

tworząc nowy widżet za pomocą widżetu bazową ($.Widget) jako punkt początkowy:

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

Tworzenie nowego widgetu, która dziedziczy z istniejącego widget :

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

Rozszerzanie widżet:

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

Zauważysz, że rozszerzona składnia i składnia dziedziczenia są takie same. Fabryka widżetów jest wystarczająco inteligentna, aby zauważyć, że tworzony widget i widżet, z którego dziedziczysz, są takie same i obsługują je odpowiednio.

Podczas dziedziczenia lub rozszerzania widżetu wystarczy określić, co chcesz zmienić lub dodać. Istnieje również kilka nowych metod, które istnieją w widgecie bazowym, aby ułatwić pracę z dziedziczeniem i metodami zmieniającymi kontekst. Przeczytaj jQuery.Widget documentation, aby uzyskać pełną listę metod i ich opisów. Na pewno chcesz przeczytać o _super(), jeśli rozszerzasz widżet.

Oto przykład, który będzie zmienić domyślną opcję delay do 500 i dodać nową opcję prefix która jest dodawana do wszystkich sugestii:

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