JQuery ui widget inheritance
I need to customize jquery ui widget. I wanted to change only the "create" method. I wrote a new widget inherited from ui.automplete widget. This works fine. But how do I add new events like select, click, change? Isn't it possible to add events on widget inheritance?
$.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!
cons开发者_StackOverflow中文版ole.log("-- test my_autocomplete change: " );
.....
}
});
ui.automplete methods of JQuery ui 1.8:
$.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() {
...
}
});
Yes this is possible, but you if you want events, i think that you are doing it wrong...currently, you are adding them as methods as to be called like:
$('.selector').widget('select');
If you want regular events, you can attach them to the element directly. So in your _create method do:
_create : function() {
//Bind normal events
this.element.click(function() {...});
this.element.select(function() {...});
//Howto fire a custom event
this._trigger('myEvent', event, data);
});
If you want to supply callbacks to the custom event example, you can do that through supplying it to the init options, or you can bind to it:
$('.selector').bind('myWidgetmyEvent',function(event,ui) {...});
精彩评论