我需要自定义 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() {
...
}
});
最佳答案
是的,这是可能的,但是如果你想要事件,我认为你做错了......目前,你将它们添加为要调用的方法,如下所示:
$('.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 选项来实现,也可以绑定(bind)到它:
$('.selector').bind('myWidgetmyEvent',function(event,ui) {...});
关于jquery-ui - JQuery ui 小部件继承,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/7278793/