JQuery UI小部件继承

Question

我需要自定义jQuery UI小部件。我只想更改“创建”方法。我编写了一个继承自ui.automplete小部件的新小部件，这很好用。但是，我如何添加新事件，例如选择、点击和更改？在小部件继承上添加事件难道不行吗？

$.widget("ui.my_autocomplete", $.ui.autocomplete, {

    _create: function() {
        //Here is my customized code
    },
    select: function( event, ui ) { // Not working!
        console.log("-- test my_autocomplete select: " );
        ui.item.option.selected = true;
        .....
    }, 
    change: function( event, ui ) { // Not working!
        console.log("-- test my_autocomplete change: " );
        .....
    }
});

JQuery UI 1.8的ui.automplete方法：

$.widget( "ui.autocomplete", {
    options: {
        minLength: 1,
        delay: 300
    },
    _create: function() {
        ...
    },
    destroy: function() {
        ...
    },
    _setOption: function( key ) {
        ...
    },
    _initSource: function() {
        ...
    },
    search: function( value, event ) {
        ...
    },
    _search: function( value ) {
        ...
    },
    _response: function( content ) {
        ...
    },
    close: function( event ) {
        ...
    },
    _normalize: function( items ) {
        ...
    },
    _suggest: function( items ) {
        ...
    },
    _renderMenu: function( ul, items ) {
        ...
    },
    _renderItem: function( ul, item) {
        ...
    },
    _move: function( direction, event ) {
        ...
    },
    widget: function() {
        ...
    }
});

- jargalan

---

我尝试在小部件中实现继承，但是出现了一些错误，例如Uncaught TypeError: i不是构造函数。你能否请看一下这个问题？http://stackoverflow.com/questions/39009882/how-to-implement-inheritance-in-jquery-ui-widget - Arun

Answer 1

是的，这是可能的。但是如果您想要事件，我认为您的做法有误......目前，您正在将它们添加为方法以便像这样调用：

$('.selector').widget('select');

如果你想要定期事件，可以直接将它们附加到元素上。因此，在你的_create方法中执行以下操作：

_create : function() {

   //Bind normal events
   this.element.click(function() {...});
   this.element.select(function() {...});

   //Howto fire a custom event
   this._trigger('myEvent', event, data);
});

如果您想为自定义事件示例提供回调函数，可以通过将其提供给 init 选项来实现，或者可以绑定它：

$('.selector').bind('myWidgetmyEvent',function(event,ui) {...});

- jyore