依次打开jQuery UI对话框

Question

我有多个jQuery UI对话框，我想一个接一个地显示(一个关闭，下一行打开(。目前，它们都显示模态，但后面的一个更大，在我看来看起来很糟糕/令人困惑。

我通常会让一个对话框的关闭函数在下一个对话框中打开，但这些对话框是从单独的函数中调用的，它们是动态的，因为并非所有对话框都是基于某些标准显示的。

我正在考虑一种使用$.Deferred的方法，但不确定这是否有效，因为我的理解是，它更适用于AJAX调用之类的东西。

下面是一个(极其(简化的示例，说明如何按原样构建代码。

<script>
function displayAlert1(){
    $('<div/>', {text: 'Alert 1!'}).dialog({
        modal: true,
        autoOpen: true,
        width: 400,
        buttons: { OK: function(event, ui){ $(this).dialog('close'); } }
    });
}
function displayAlert2(){
    $('<div />', {text: 'Alert 2!'}).dialog({
        modal: true,
        autoOpen: true,
        width: 200,
        buttons: { OK: function(event, ui){ $(this).dialog('close'); } }
    });
}
$(function(){
    // These are actually met from data passed by AJAX
    var condition1 = true;
    var condition2 = true;
    $('a').live('click', function(event, ui){
        if(condition1) displayAlert1();
        if(condition2) displayAlert2();
    }
});
</script>
<!-- The links are actually dynamically produced from AJAX, thus the live() event handler -->
<a>Click Me!</a>

jsFiddle

我的想法是，也许我可以让每个alert函数返回对对话框元素或$.Deferred对象的引用，但我不确定如何从主执行部分(检查条件并调用函数(实现链接。

我还想确保它链接到下一个对话框，无论对话框在关闭之前如何；无论是通过X、通过"close"方法还是通过"destroy"方法。

感谢您的意见。

Answer 1

经过思考，我提出了使用堆叠队列的简化方法。我想我本可以使用$.Deferred对象，但它会稍微复杂一点，而且最终本质上是一个堆栈。

下面是我的代码。我基本上初始化了一个数组作为堆栈，然后让每个函数将对话框元素推入堆栈。我绑定到所有未来对话框的关闭事件中，并让它打开队列中的下一个对话框。

有一些明显的优化需要做，但这是我想要的基本功能。

function displayAlert1(){
    return $('<div/>', {'class': 'alerts', text: 'Alert 1!'}).dialog({
        modal: true,
        autoOpen: false,
        width: 400,
        buttons: { OK: function(event, ui){ $(this).dialog('close'); } }
    });
}
function displayAlert2(){
    return $('<div/>', {'class': 'alerts', text: 'Alert 2!'}).dialog({
        modal: true,
        autoOpen: false,
        width: 200,
        buttons: { OK: function(event, ui){ $(this).dialog('close'); } }
    });
}
$(function(){
    // These are actually met from data passed by AJAX
    condition1 = true;
    condition2 = true;
    // Dialog stack
    dialogs = [];
    $('a').live('click', function(event, ui){
        if(condition1) dialogs.push(displayAlert1());
        if(condition2) dialogs.push(displayAlert2());
        // Grab the next dialog in queue
        d = dialogs.shift();
        // Check if it is valid, and open it
        if(d && d.dialog){
            d.dialog('open');
        }
    });
    $('.alerts').live('dialogclose', function(event, ui){
        // Grab the next dialog in queue
        d = dialogs.shift();
        // Check if it is valid, and open it
        if(d && d.dialog){
            d.dialog('open');
        }
        // Return false, or the close button (X) will glitch and re-create dialogs
        return false;
    });
});

jsFiddle

Answer 2

有两件事可以用来实现：

1( 每个对话框都有一个标识符(您可以将其添加为div上的"id"属性(

2( 收听对话框上的"关闭"事件(http://api.jqueryui.com/dialog/)

因此，在"关闭"处理程序上，您可以检查当前状态，并在此基础上打开/关闭其他对话框。

当前状态为：当前打开的对话框，以及用于条件1、条件2等的其他参数。

http://jsbin.com/iwovob/1/