2011-09-02 88 views
4

我需要自定義jquery ui控件。我只想改變「創建」方法。 我寫了一個從ui.automplete小部件繼承的新小部件。 這工作正常。但是,如何添加新的事件,如選擇,點擊,更改? 不可能在小部件繼承上添加事件嗎?jQuery ui控件繼承

$.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() { 
     ... 
    } 
}); 
+0

我試圖在窗口小部件中實現繼承,但像Uncaught TypeError一樣的錯誤:我不是構造函數即將到來。請你看看這個問題 http://stackoverflow.com/questions/39009882/how-to-implement-inheritance-in-jquery-ui-widget – Arun

回答

4

是的,這是可能的,但你如果想的事件,我認爲你這樣做是錯誤的...現在,你是其添加爲方法,以這樣調用:

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

如果你要提供回調到自定義事件例子,你可以通過它提供給初始化選項,或者你可以綁定到它:

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