1

次々に表示したい jQuery UI ダイアログが複数あります (1 つが閉じ、次の行が開きます)。現在、それらはすべてモーダルで表示されていますが、後ろの 1 つが大きく、見栄えが悪い/わかりにくいと思います。

通常は、あるダイアログの閉じる関数で次のダイアログを開くようにしますが、これらのダイアログは別の関数から呼び出され、特定の基準に基づいてすべてのダイアログが常に表示されるわけではないという意味で動的です。

を使用する方法を考えています$.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>

jsフィドル

私の考えでは、各アラート関数にダイアログ要素または$.Deferredオブジェクトへの参照を返させることができるかもしれませんが、メインの実行部分 (条件がチェックされ、関数が呼び出される場所) からチェーンを実装する方法がわかりません。

また、ダイアログが閉じられる前に、どのようにダイアログが閉じられても、次のダイアログに連鎖することを確認したいと思います。X、「close」メソッド、または「destroy」メソッドのいずれかによって。

ご意見ありがとうございます。

4

2 に答える 2

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;
    });
});

jsフィドル

于 2013-02-25T15:34:43.230 に答える
0

これを実装するために使用できるものが 2 つあります。

1）各ダイアログの識別子を持っています（divの「id」属性として追加できます）

2) ダイアログで「閉じる」イベントをリッスンします ( http://api.jqueryui.com/dialog/ )

したがって、「閉じる」ハンドラーで現在の状態を確認し、それに基づいて他のダイアログを開閉できます。

現在の状態は次のとおりです。現在開いているダイアログ、および条件 1、条件 2 などに使用していたその他のパラメーター。

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

于 2013-02-23T21:59:29.663 に答える