html 提示“数据在加载中，请稍后……”

news/2024/7/11 4:29:21 标签: html, function, microsoft, button, border, internet
htmledit_views">

项目完成了不过因为FileNet加载数据比较慢，所以3-4条记录加载也至少要10几秒，所以客户提出要有一个提示”提示数据加载，请稍后……“这个问题。这个东西开始实现起来不太容易。开始有一个解决方案就是利用一个div,在div里面使用背景图片，加载一个gif动态的图片，再利用div的display可以实现提示。不过这个方法明显的不合适，所以又换了一种实现方式。

效果如下图所示。


js代码如下

var oProgressLayer=null;
function SetBusy(){
for(var iCnt=0;iCnt<document.all.length;iCnt++){
try{document.all[iCnt].oldCursor=document.all[iCnt].style.cursor;
document.all[iCnt].style.cursor='wait';}catch(e){;}
try{document.all[iCnt].oldοnmοusedοwn=document.all[iCnt].onmousedown;
document.all[iCnt].οnmοusedοwn=function(){return false;}}catch(e){;}
try{document.all[iCnt].oldοnclick=document.all[iCnt].onclick;
document.all[iCnt].οnclick=function(){return false;}}catch(e){;}
try{document.all[iCnt].oldοnmοuseοver=document.all[iCnt].onmouseover;
document.all[iCnt].οnmοuseοver=function(){return false;}}catch(e){;}
try{document.all[iCnt].oldοnmοusemοve=document.all[iCnt].onmousemove;
document.all[iCnt].οnmοusemοve=function(){return false;}}catch(e){;}
try{document.all[iCnt].oldοnkeydοwn=document.all[iCnt].onkeydown;
document.all[iCnt].οnkeydοwn=function(){return false;}}catch(e){;}
try{document.all[iCnt].oldοncοntextmenu=document.all[iCnt].oncontextmenu;
document.all[iCnt].οncοntextmenu=function(){return false;}}catch(e){;}
try{document.all[iCnt].oldonselectstart=document.all[iCnt].onselectstart;
document.all[iCnt].onselectstart=function(){return false;}}catch(e){;}
}
}
/************************************************************************************************
// 恢复网页上所有元素可以响应事件，以及设置鼠标光标默认光标
*************************************************************************************************/
function ReleaseBusy(){
for(var iCnt=0;iCnt<document.all.length;iCnt++){
try{document.all[iCnt].style.cursor=document.all[iCnt].oldCursor;}catch(e){;}
try{document.all[iCnt].οnmοusedοwn=document.all[iCnt].oldonmousedown;}catch(e){;}
try{document.all[iCnt].οnclick=document.all[iCnt].oldonclick;}catch(e){;}
try{document.all[iCnt].οnmοuseοver=document.all[iCnt].oldonmouseover;}catch(e){;}
try{document.all[iCnt].οnmοusemοve=document.all[iCnt].oldonmousemove;}catch(e){;}
try{document.all[iCnt].οnkeydοwn=document.all[iCnt].oldonkeydown;}catch(e){;}
try{document.all[iCnt].οncοntextmenu=document.all[iCnt].oldoncontextmenu;}catch(e){;}
try{document.all[iCnt].onselectstart=document.all[iCnt].oldonselectstart;}catch(e){;}
}
}
/************************************************************************************************
// 关闭“正在处理"对话框
*************************************************************************************************/
function HideProgressInfo(){
if(oProgressLayer){
//ReleaseBusy();
oProgressLayer.removeNode(true);
oProgressLayer=null;
}
}
/************************************************************************************************
// 显示“正在处理”对话框 (样式一) 动画光标样式
*************************************************************************************************/
function ShowProgressInfo(){
if(oProgressLayer) return;
oProgressLayer=document.createElement('DIV');
with(oProgressLayer.style){
width='230px';
height='70px';
position='absolute';
left=(document.body.clientWidth-230)>>1;
top=(document.body.clientHeight-70)>>1;
backgroundColor='buttonFace';
borderLeft='solid 1px silver';
borderTop='solid 1px silver';
borderRight='solid 1px gray';
borderBottom='solid 1px gray';
fontWeight='700';
fontSize='13px';
zIndex='999';
}
oProgressLayer.innerHTML=
'<table border="0" cellspacing="0" cellpadding="0" width="100%" height="100%">'+
'<tr>'+
'<td align="center" valign="middle">'+
'<img src="/Images/Processing.gif" border="0" align="absmiddle" />'+
'  正在处理数据，请稍候……'+
'</td>'+
'</tr>'+
'</table>';
document.body.appendChild(oProgressLayer);
//SetBusy();
}
这个提示框只是一个提示消息，当然不能阻止用户那好奇的鼠标，下面的的js代码是阻止用户对页面进行操作的 

<script language="JavaScript"> 
function ReadonlyText(objText)
{
	 
	if (objText){
		objText.style.backgroundColor = "menu";
		objText.style.color = "black";
		objText.readOnly=true;
	}
}
 

 
 
function DisableElements(container,blnHidenButton)
{
	if (!container) 
	return;
	var aEle;
	if (navigator.appName =="Microsoft Internet Explorer")  //IE
	{
		for (var i=0;i<container.all.length;i++)
		{
			aEle = container.all[i];
			tagName = aEle.tagName.toUpperCase();
			if ((tagName=="SELECT")||(tagName=="BUTTON"))
			{
				aEle.disabled = true;
				if(tagName=="BUTTON" && blnHidenButton)
				{
					aEle.style.display = "none";
				}
			}
			else if (tagName=="INPUT") 
			{
				if (aEle.type.toUpperCase()!="HIDDEN")
				{
					if (aEle.type.toUpperCase()=="TEXT") 
					{
						ReadonlyText(aEle);
					}
					else
					{
						aEle.disabled = true;
					}
				}
				if((aEle.type.toUpperCase()=="BUTTON"||aEle.type.toUpperCase()=="SUBMIT") && blnHidenButton)
				{
					aEle.style.display = "none";
				}
			}
			else if (tagName=="TEXTAREA") 
			{
				ReadonlyText(aEle);
			}
		}
	}
	else
	{
		var aEle = container.getElementsByTagName("select");
		for (var i=0;i< aEle.length;i++)
		{
			aEle[i].disabled = true;
		}
		
		aEle = container.getElementsByTagName("button");
		for (var i=0;i< aEle.length;i++)
		{
			aEle[i].disabled = true;
		}
		
		aEle = container.getElementsByTagName("textarea");
		for (var i=0;i< aEle.length;i++)
		{
			ReadonlyText(aEle[i]);
		}
		
		aEle = container.getElementsByTagName("input");
		for (var i=0;i< aEle.length;i++)
		{
			if (aEle[i].type.toUpperCase()!="HIDDEN")
			{
				if (aEle[i].type.toUpperCase()=="TEXT")
				{
					ReadonlyText(aEle[i]);
				}
				else
				{
					aEle[i].disabled = true;
				}
			}
			if((aEle[i].type.toUpperCase()=="BUTTON"||aEle[i].type.toUpperCase()=="SUBMIT")&&blnHidenButton)
			{
				aEle[i].style.display = "none";
			}
		}
	}
}
 
function DisableLinkElement(oElement) 
{
	
	if (!oElement) 
		return;	
	if (oElement.tagName.toUpperCase()=="A")
	{
		oElement.disabled = true;	
		oElement.onclick = CancelEvent;				
	}			
	
}
 
function DisableLinkElements(container) 
{
	
	if (!container) 
		return;
	var aEle;
	if (navigator.appName =="Microsoft Internet Explorer")  //IE
	{
		for (var i=0;i<container.all.length;i++)
		{
			aEle = container.all[i];
			tagName = aEle.tagName.toUpperCase();
			if ((tagName=="A") && (aEle.id==""))
			{
				aEle.disabled = true;	
				aEle.onclick = CancelEvent;				
			}			
		}
	}
	else
	{
		var aEle = container.getElementsByTagName("a");
		for (var i=0;i< aEle.length;i++)
		{
			if (aEle[i].id == "")
			{
				aEle[i].disabled = true;	
				aEle[i].onclick = CancelEvent;
			}			
		}
	}	
	
}
 
function getElementsChild(formName,elementName,i)
{
	var objReturn;
	var lngLenghth=document.forms[formName].elements[elementName].length;
	lngLenghth=parseFloat(lngLenghth);
	if (lngLenghth + "" == "NaN")
	{
		objReturn = document.forms[formName].elements[elementName];
	}
	else
	{
		objReturn = document.forms[formName].elements[elementName][parseFloat(i)];
	}
	return objReturn;
}

</script>
在jsp页面初始化是调用 
ShowProgressInfo()；
然后在数据加载完成以后调用




 HideProgressInfo()；







其他的都不用调用另外如果对图片觉得不满意可以可以更换图片，需要修改代码为src部分





'<table border="0" cellspacing="0" cellpadding="0" width="100%" height="100%">'+
'<tr>'+
'<td align="center" valign="middle">'+
'<img src="/Images/Processing.gif" border="0" align="absmiddle" />'+
'  正在处理数据，请稍候……'+
'</td>'+
'</tr>'+
'</table>


这部分代码能完成所需功能，不过不过比较完整的功能。完整的js代码在点击打开链接.




                

        

        

    

                    

                    

                    

                    

						

						http://www.niftyadmin.cn/n/872325.html
						
                    

                    

                        
                    

                

                

                    相关文章

                
                

                    

                        

                            

                                
                                    
                                    spring 测试框架与维护项目结合问题
                                    
								
                            

                        

                        

                            

                                spring 测试框架与维护项目结合问题
                            

                            

                                之前项目中一直用 junit进行单元测试&#xff0c;使用的版本一直是junit4.3版本&#xff08;在junit库中&#xff0c;应该是自己定义的库&#xff09;。 
由于spring test需要junit4.4,所以在工程的classpath中添加了junit4.4 
&#xff0c;运行时&#xff0c;报如下错误&#…
                            

                            

                                阅读更多...
                            

                        

                    

                

                
                

                    

                        

                            

                                
                                    
                                    显示数据加载中
                                    
								
                            

                        

                        

                            

                                显示数据加载中
                            

                            

                                在加载比较慢的页面&#xff08;如含有很多节点的树&#xff09;中&#xff0c;引入公用文件&#xff0c;公用文件内容 
<div id"dataLoad"><!--页面载入显示--><table>   <tr><td align"center"><font color"red&q…
                            

                            

                                阅读更多...
                            

                        

                    

                

                
                

                    

                        

                            

                                
                                    
                                    spring 定时任务
                                    
								
                            

                        

                        

                            

                                spring 定时任务
                            

                            

                                自动启动就是设定一个启动时间&#xff0c;当时间符合条件的情况&#xff0c;就启动一个流程。项目中出现的问题就是&#xff1a;手动启动项目没问题&#xff0c;而且流程数据都存到了数据库。而自动启动运行的都是相应的代码但是流程数据不能存到数据库中。上网找了相关的spri…
                            

                            

                                阅读更多...
                            

                        

                    

                

                
                

                    

                        

                            

                                
                                    
                                    断点续传
                                    
								
                            

                        

                        

                            

                                断点续传
                            

                            

                                前一段的时间项目上客户想实现断点续传的功能&#xff0c;在网上找了一些资料&#xff0c;同时也有一部分功能实现代码。 首先要明白断点续传的原理&#xff1a; 其实断点续传的原理很简单&#xff0c;就是在Http的请求上和一般的下载有所不同而已。 打个比方&#xff0c;浏览器…
                            

                            

                                阅读更多...
                            

                        

                    

                

                
                

                    

                        

                            

                                
                                    
                                    IE 6下 a javascript:void(0)问题
                                    
								
                            

                        

                        

                            

                                IE 6下 a javascript:void(0)问题
                            

                            

                                原文地址&#xff1a;http://blog.csdn.net/leefwu/article/details/5833904 在购物页面的“立即购买”按钮是用a标签来做的&#xff0c;设置了href"javascript:void(0);"&#xff0c;同时在a上面添加了onclick事件&#xff0c;目的是在点击之后处理Cookies并跳转到订…
                            

                            

                                阅读更多...
                            

                        

                    

                

                
                

                    

                        

                            

                                
                                    
                                    showModalDialog传值
                                    
								
                            

                        

                        

                            

                                showModalDialog传值
                            

                            

                                项目中出现一个bug&#xff0c;就是在弹出框选择了部门的值以后&#xff0c;写入父页面&#xff0c;当在点击查找部门的按钮后&#xff0c;已经选择的值要带入到弹出框中。类似下面的情况。 解决方案就是利用showModalDialog 与json进行传值 
父页面在点击按钮调用下面的js方法…
                            

                            

                                阅读更多...
                            

                        

                    

                

                
                

                    

                        

                            

                                
                                    
                                    使用APACHE ORO 实现正则替换
                                    
								
                            

                        

                        

                            

                                使用APACHE ORO 实现正则替换
                            

                            

                                JAVA中的正则实现一直是一个混乱的情况,JDK提供的正则功能由于版本差异而存在向下不兼容的问题. Apache的ORO作为外部LIB,多少可以缓解JVM版本差异.但由于JAVA开源的混乱局面,想做到"一次编写随处运行"还需要JAVA世界付出相当的努力. 以下为使用ORO实现正则替换的示例…
                            

                            

                                阅读更多...
                            

                        

                    

                

                
                

                    

                        

                            

                                
                                    
                                    FileNet处理多人任务
                                    
								
                            

                        

                        

                            

                                FileNet处理多人任务
                            

                            

                                在使用FileNet处理流程的时候&#xff0c;经常会遇到在一个节点有多个处理人&#xff0c;从该节点流向下一个节点的时候就需要两个人都要处理完所属任务。在项目中此过程是需要经过代码处理的. 在执行人处理节点就有两个参与者&#xff0c;同时也就需要两个参与者处理都完成任务…
                            

                            

                                阅读更多...
                            

                        

                    

                

                
            

            

                

                    

                        
                        
                        
                        
                    

                

                

                    

                        

                            最新文章

                        
                    

                

            

        

    

    

        

            

                Copyright @ 2022~2023