如何将回调附加到对话框显示的 jquery 效果？

Question

我的问题是我不知道如何将回调附加到 jquery ui 对话框显示。

显示实际上是一个选项：

$( ".selector" ).dialog({ show: 'slide' });

我想在幻灯片动画完成后进行回调。我从效果本身来看，它们有一个回调：

effect( effect, [options], [speed], [callback] )

但在对话框中，效果的设置非常不同。我也尝试过输入：

$( ".selector" ).dialog({ show: 'slide', callback: function() {} });

但没有成功。

建议？

Answer 1

我发现有必要使用“focus：”事件。由于显示：我失去了正确选择的按钮。可爱的互动。

focus: function( event, ui ) {
    $(this).siblings('.ui-dialog-buttonpane').find("button:contains('Upload')").focus();
},

Answer 2

更新 2015-07-27 对于使用 jQuery v1.10.0 或更高版本的任何人，请参阅这个其他答案 因为我的解决方案不适用于较新版本的 jQuery。

---

原始答案

已经回答了，但既然我有了答案，我还是要发布它......

$('#dialog').dialog({
    show: {
        effect: 'slide',
        complete: function() {
            console.log('animation complete');
        }
    },
    open: function(event, ui) {
        console.log('open');
    }
});

在<中显示open，然后是animationcomplete em>控制台

Answer 3

两年后，建议的解决方案（由 @andyb）不再适用于当前版本的 jQuery UI（特别是从 v1.10.0 开始）。他的解决方案依赖于complete回调方法——一个未记录的功能。

我想出了一个最新的解决方案，使用 jQuery Promise 对象：

$("#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");
        });
    }
});

这是常见的 JSFiddle 演示：http://jsfiddle.net/losnir/jcmpm/

Answer 4

我下载了 jquery ui dev 包，发现回调设置为“完整”：

$( ".selector" ).dialog({ show: 'slide', complete: function() {} });

感谢每个试图帮助解决此问题的人:)

Answer 5

尝试使用对话框的 open 事件：

$( ".selector" ).dialog({
   open: function(event, ui) { ... }
});