5

我正在尝试使用jQuery BlockUI 插件在执行排序算法时阻止 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

正如@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 回答
6

$.blockUI 有一个名为“fadeIn”的选项，默认为 200 毫秒。您可以将此值设置为零以使页面块在调用该方法时立即发生。这将禁用淡入。

$(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 回答
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

您应该在用户单击“开始”按钮时使用disable() 方法禁用对话框，而不是阻止 UI 。这样，用户在过程完成时无法单击任何内容。

于 2009-10-14T04:15:09.853 回答