5

jQuery BlockUI Pluginを使用して、ソート アルゴリズムの実行中に jQuery ダイアログをブロックしようとしています。並べ替え機能は次のように機能します。

doSort : function() {
    $("#sort_dlg").block();

    // sort... takes a few seconds

    $("#sort_dlg").unblock();
}

それはうまくいきます。並べ替えが完了するまで、ダイアログはブロックされません。(並べ替えはすべてローカルで行われ、AJAX 呼び出しなどはありません。)並べ替えの前にブロックするにはどうすればよいですか?

block()ダイアログのOKボタンメソッドへの呼び出しを移動してみました：

$(function() {
    $("#sort_dlg").dialog({
        autoOpen: false,
        bgiframe: true,
        modal: true,
        buttons: {
            "Cancel": function() { $(this).dialog("close"); },
            "OK": function() {
                $("#sort_dlg").block();
                doSort();
            }
        }
    });
});

しかし、それは役に立ちませんでした。(他の手法を使用して UI をブロックするための提案を受け入れます。)

4

4 に答える 4

6

$.blockUI には、デフォルトで 200 ミリ秒に設定された「fadeIn」というオプションがあります。この値を 0 に設定すると、メソッドが呼び出されたときにすぐにページ ブロックが発生します。これにより、フェードインが無効になります。

$(function() {
$("#sort_dlg").dialog({
    autoOpen: false,
    bgiframe: true,
    modal: true,
    buttons: {
        "Cancel": function() { $(this).dialog("close"); },
        "OK": function() {
            $("#sort_dlg").block({ fadeIn: 0 }); // disable fadeIn
            doSort();
        }
    }
});
于 2010-08-30T21:26:11.597 に答える
6

@Pandincus が指摘しているように、blockUI の作業が完了するまでしばらく待ってから、並べ替えを開始できます。

$(function() {
    $("#sort_dlg").dialog({
        autoOpen: false,
        bgiframe: true,
        modal: true,
        buttons: {
            "Cancel": function() { $(this).dialog("close"); },
            "OK": function() {
                $("#sort_dlg").block();
                //WAIT FOR 1 SECOND BEFORE STARTING SORTING
                setTimeout(function(){ doSort()}, 1000);
            }
        }
    });
});
于 2009-10-14T04:17:46.937 に答える
4

上記のコメントを続けるには：

$.blockUI() を呼び出すと、アニメーションを使用してブロッキング div がフェードインし、これらのアニメーションは非同期で実行されます。JavaScript コードの次の行は複雑な並べ替えであり、このコードは完了するまでブラウザーをブロックします。その結果、実行を開始したアニメーションは、並べ替えが終わるまで終了しません!

BlockUI プラグインにはコールバック関数オプションがないようです。これは残念ですが、問題ありません。Javascript の組み込み setTimeout を使用できます。

<head>
    <title>Test</title>
    <script src="jquery.js"></script>
    <script src="jquery.blockUI.js"></script>
    <script type="text/javascript">
        $(function() {
            $("#btnTest").click(function() {
                $.blockUI();
                setTimeout(doComplicatedStuff, 1000);
            });
        });
        function doComplicatedStuff()
        {
            for(i = 0; i < 100000000; i++)
            {
                // ooh, complicated logic!
            }
            $.unblockUI();
        }
    </script>
</head>
<body>
    <p><input type="button" id="btnTest" value="Test" /></p>
</body>

これは正確な科学ではありませんが、基本的には、複雑なコードを 1 秒間遅らせることで、BlockUI がオーバーレイを表示するのに十分な時間が得られると推測しています。

お役に立てれば！

于 2009-10-14T04:19:12.983 に答える
0

UI をブロックするのではなく、ユーザーが「go」ボタンをクリックした瞬間にdisable() メソッドを使用してダイアログを無効にする必要があります。この方法では、プロセスが完了するまで、ユーザーは何もクリックできません。

于 2009-10-14T04:15:09.853 に答える