打开jQuery UI对话框一个接一个

我有多个jQuery UI对话框，我希望一个接一个地显示（一个关闭，下一行打开）。目前，他们都显示模态，但后面的一个更大，在我看来，它看起来不好/令人困惑。打开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

我的想法是，也许我可以有每个警报的函数返回一个参考对话框元素，或$.Deferred对象，但我不知道如何实现从执行主体链接（检查条件并调用函数的地方）。

我还想确保它链接到下一个对话框，而不管它在关闭之前的对话方式如何;无论是通过X，通过'close'方法还是'destroy'方法。

谢谢你的任何意见。

来源

2013-02-23 Demonslay335

思考的情况后，我想出了一种利用堆叠队列的简化方法。我想我可以使用$.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

来源

2013-02-25 15:34:43 Demonslay335