使用 JQuery 和 CSS 显示任何任务或进行中的工作的进度条（加载框）

• 下载源代码 - 39.19 KB

引言

本文档解释了如何在使用 JQuery 和 CSS 的情况下，在后端（后台进程）运行任何任务或工作时显示进度条（加载框）。

有时我们的网页中会有耗时的操作，例如照片上传、消息发送、附件上传等。 在这些类型的耗时操作期间，最好显示一个窗口，显示当前状态，例如“发送中...”、“加载中...”、“删除中...”等，如图所示

Using the Code

让我们看看如何实现它。 以下函数将创建两个叠加层以显示进度条。

参数

• progTit：进度窗口的标题。
• progText：进度窗口的文本内容，例如“发送中...”、“加载中...”、“删除中...”。
• progImg：要在框中显示的图像的路径。

$.showprogress = function(progTit, progText, progImg)
{
    $.hideprogress();
    $("BODY").append('<div id="processing_overlay"></div>');
    $("BODY").append(
      '<div id="processing_container">' +
        '<h1 id="processing_title">' + progTit + '</h1>' +
        '<div id="processing_content">' +
          '<div id="processing_message">'+ progText + 
                      '<br/><br/>' + progImg + '</div>' +
        '</div>' +
      '</div>');
     
    var pos = ($.browser.msie && parseInt($.browser.version) <= 6 ) ? 
               'absolute' : 'fixed'; 
    
    $("#processing_container").css({
        position: pos,
        zIndex: 99999,
        padding: 0,
        margin: 0
    });
        
    $("#processing_container").css({
        minWidth: $("#processing_container").outerWidth(),
        maxWidth: $("#processing_container").outerWidth()
    });
      
    var top = (($(window).height() / 2) - 
      ($("#processing_container").outerHeight() / 2)) + (-75);
    var left = (($(window).width() / 2) - 
      ($("#processing_container").outerWidth() / 2)) + 0;
    if( top < 0 ) top = 0;
    if( left < 0 ) left = 0;
    
    // IE6 fix
    if( $.browser.msie && parseInt($.browser.version) <= 6 ) top = 
        top + $(window).scrollTop();
    
    $("#processing_container").css({
        top: top + 'px',
        left: left + 'px'
    });
    $("#processing_overlay").height( $(document).height() );
}

为了隐藏进度框，我又添加了另一个函数，如下所示

$.hideprogress = function()
{
    $("#processing_container").remove();
    $("#processing_overlay").remove();
}

让我们以一个简单的留言板系统为例，使这个例子更清晰。

在留言系统中，您有不同的部分，例如收件箱、已发送、草稿等，当我们通过点击链接访问这些部分时，显示点击部分的内容需要一些时间。 在这段时间内，我们可以显示一个包含文本的框，例如“正在加载收件箱”，标题为“收件箱”。 请参阅以下代码

function fillinbox(){
     $.showprogress('Inbox','Loading.....','<img src="Images/loadingimage.gif"/>');
         $.post("controller/messagecontroller.aspx",{action:'inbox',page:'1'},
         function(ret){
          $("#divResult").html(ret);
         } 
       );
       $.hideprogress();
}

在上面的示例中，收件箱内容是从另一个页面加载的，获取该内容需要一些时间。 在这段时间内，进度条会显示“正在加载...”。

步骤

1. 将jquery.js文件从附件文件夹中添加到您的页面中。
2. 将msgwindow.js文件从附件文件夹中添加到您的页面中。
3. 将 CSS 文件从附件文件夹中添加到您的页面中。
4. 从附件文件夹中的“Image”文件夹中复制图像。

注意

• 您可以将一个单独的函数添加到您的页面中，或者您可以创建一个新的 JS 文件并将此函数放入其中。
• 如果您要从下载的代码中添加 JQuery JS 文件，请删除页面中已有的旧 JQuery JS 文件；否则，它将无法正常工作。

关注点

以前，我不知道我们可以将自己的函数添加到 JQuery 文件中。 我很惊讶我添加的函数工作得很好。 您可以将自己的函数/代码添加到任何 JQuery 文件中。