如何在对话框显示中将回调附加到 jquery 效果?
声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow
原文地址: http://stackoverflow.com/questions/6923647/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to attach callback to jquery effect on dialog show?
提问by Pehmolelu
My problem is that I do not know how to attach callback to the jquery ui dialog show.
我的问题是我不知道如何将回调附加到 jquery ui 对话框显示。
The show is actually an option:
节目其实是一个选择:
$( ".selector" ).dialog({ show: 'slide' });
I want to have a callback after the slide animation is complete. I looked from the effects itself and they have a callback:
我想在幻灯片动画完成后进行回调。我从效果本身看,他们有一个回调:
effect( effect, [options], [speed], [callback] )
But in the dialog the effect is set up very differently. I tried also putting:
但是在对话框中,效果的设置非常不同。我也试过放:
$( ".selector" ).dialog({ show: 'slide', callback: function() {} });
But it didn't work.
但它没有用。
Suggestions?
建议?
回答by andyb
Update 2015-07-27For anyone using jQuery v1.10.0 or above please see this other answeras my solution will not work with newer versions of jQuery.
更新 2015-07-27对于使用 jQuery v1.10.0 或更高版本的任何人,请参阅其他答案,因为我的解决方案不适用于较新版本的 jQuery。
Original answer
原答案
Already answered but since I had an answer, I'm going to post it anyway…
已经回答了,但既然我有了答案,我还是要发布它……
$('#dialog').dialog({
show: {
effect: 'slide',
complete: function() {
console.log('animation complete');
}
},
open: function(event, ui) {
console.log('open');
}
});
Shows open
followed by animation complete
in the Console
在控制台中显示open
后跟animation complete
回答by losnir
Two years later, the suggested solution (by @andyb) is no longer working in current versions of jQuery UI (specifically since v1.10.0). His solution relied on the complete
callback method - an undocumented feature .
两年后,建议的解决方案(由@andyb 提供)不再适用于当前版本的 jQuery UI(特别是自 v1.10.0 以来)。他的解决方案依赖于complete
回调方法 - 一个未公开的功能。
I've came up with an up-to-date solution, using jQuery Promise
object:
我想出了一个最新的解决方案,使用 jQueryPromise
对象:
$("#dialog").dialog({
show: {
effect: "drop",
direction: "up",
duration: 1000
},
hide: {
effect: "drop",
direction: "down",
duration: 1000
},
open: function () {
$(this).parent().promise().done(function () {
console.log("[#Dialog] Opened");
});
},
close: function () {
$(this).parent().promise().done(function () {
console.log("[#Dialog] Closed");
});
}
});
Here is the usual JSFiddle Demo: http://jsfiddle.net/losnir/jcmpm/
这是通常的 JSFiddle 演示:http: //jsfiddle.net/losnir/jcmpm/
回答by Pehmolelu
I downloaded the jquery ui dev bundle and found out that the callback is set with "complete":
我下载了 jquery ui dev 包,发现回调设置为“完成”:
$( ".selector" ).dialog({ show: 'slide', complete: function() {} });
Thanks for everyone trying to help solve this :)
感谢大家试图帮助解决这个问题:)
回答by Igor Dymov
Try to use open
event of dialog:
尝试使用open
对话框事件:
$( ".selector" ).dialog({
open: function(event, ui) { ... }
});
回答by Chris Prince
I found it necessary to use the "focus:" event. I was losing the correctly selected button because of the show:. Lovely interactions.
我发现有必要使用“focus:”事件。由于显示:我丢失了正确选择的按钮。可爱的互动。
focus: function( event, ui ) {
$(this).siblings('.ui-dialog-buttonpane').find("button:contains('Upload')").focus();
},