asp.net显示进度提示功能.

最新推荐文章于 2015-07-10 16:52:12 发布

原创最新推荐文章于 2015-07-10 16:52:12 发布 · 1.2k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#asp.net #javascript #button #border #function #服务器

jQuery 专栏收录该内容

14 篇文章

订阅专栏

本文介绍如何在ASP.NET应用程序中使用JavaScript实现一个加载进度条。通过在服务器控件上绑定客户端点击事件来触发进度条显示与隐藏，同时提供了一个完整的JavaScript脚本示例，该脚本兼容IE和其他现代浏览器。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在服务器控件绑定一个js方法,如:

<asp:button onClentClick="showLoading()">

javascript脚本可以放到一个Loading.js文件中.代码如下:

//显示进度条 
var isIE=!!document.all;
var imgGlobalUrl = 'http://localhost/';
var loadHTML = '<table border="0" cellspacing="0" cellpadding="0"><tr><td width="8" align="right" background="'+imgGlobalUrl+'Images/waiting_l.gif"> </td><td background="'+imgGlobalUrl+'Images/waiting_m.gif" style="PADDING-RIGHT:0px;PADDING-LEFT:5px;FONT-WEIGHT:bold;FONT-SIZE:14px;PADDING-BOTTOM:0px;COLOR:#0f5594;PADDING-TOP:0px"><IMG SRC="'+imgGlobalUrl+'Images/loading.gif" border="0"></td><td background="'+imgGlobalUrl+'Images/waiting_m.gif" style="PADDING-RIGHT:0px;PADDING-LEFT:5px;FONT-WEIGHT:bold;FONT-SIZE:14px;PADDING-BOTTOM:0px;COLOR:#0f5594;PADDING-TOP:0px">正在处理，请稍候。。。</td><td width="8" height="40" background="'+imgGlobalUrl+'Images/waiting_r2.gif"> </td></tr></table>';
var loadingDiv=document.createElement("div");
loadingDiv.innerHTML=loadHTML;
loadingDiv.style.position="absolute";
loadingDiv.style.display="none";
loadingDiv.style.zIndex = 9999;
var loadingTimeout
var funInsertLoadingDiv = function(){
        document.body.insertBefore(loadingDiv,null);
};
if(isIE)
    window.attachEvent("onload",funInsertLoadingDiv);
else
    window.addEventListener('load', funInsertLoadingDiv, false);
function showLoading()
{
    window.clearTimeout(loadingTimeout);
    with(loadingDiv.style)
    {
        display="";
        top=document.body.scrollTop+200;
        if (loadingDiv.offsetWidth)
            left=document.body.clientWidth/2 - loadingDiv.offsetWidth/2;
          else
            left=document.body.clientWidth/2 - 115;
    }
}
function hideLoading()
{
    loadingDiv.style.display="none";
}