0

我正在努力实现一个进度条。我在网上找到的当前版本使用 ajaxStart 启动栏并设置起始值,然后设置 ajaxComplete 以动画并完成栏。

我有一个工作流功能,我希望能够设置每一步的栏应该有多远。这可能吗?我需要一些使用 ajaxStart 的方法,然后在函数结束和 ajaxComplete 发生之前对其进行多次修改。

$(document).ajaxStart(function() {
    //only add progress bar if added yet.
    if ($("#progress").length === 0) {
        $("body").append($("<div><dt/><dd/></div>").attr("id", "progress"));
        $("#progress").width((50 + Math.random() * 30) + "%");
    }
});

$(document).ajaxComplete(function() {
    //End loading animation
    $("#progress").width("101%").delay(200).fadeOut(400, function() {
        $(this).remove();
    });
});
4

1 回答 1

1

你有没有研究过 SignalR,它是一个用于实时更新页面的新库。

你可以将它用于这种事情,它会使用 websockets,它为你提供一个定期更新的后台连接。

此外,如果浏览器不支持 Web 套接字,那么它会退回到旧技术:

这是一个教程,展示了如何使用它创建进度条:

于 2013-07-31T19:59:05.390 回答