html 提示“数据在加载中,请稍后……”
2012-05-07 22:11
369 查看
项目完成了不过因为FileNet加载数据比较慢,所以3-4条记录加载也至少要10几秒,所以客户提出要有一个提示”提示数据加载,请稍后……“这个问题。这个东西开始实现起来不太容易。开始有一个解决方案就是利用一个div,在div里面使用背景图片,加载一个gif动态的图片,再利用div的display可以实现提示。不过这个方法明显的不合适,所以又换了一种实现方式。
效果如下图所示。
js代码如下
其他的都不用调用另外如果对图片觉得不满意可以可以更换图片,需要修改代码为src部分
这部分代码能完成所需功能,不过不过比较完整的功能。完整的js代码在点击打开链接.
效果如下图所示。
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].oldonmousedown=document.all[iCnt].onmousedown; document.all[iCnt].onmousedown=function(){return false;}}catch(e){;} try{document.all[iCnt].oldonclick=document.all[iCnt].onclick; document.all[iCnt].onclick=function(){return false;}}catch(e){;} try{document.all[iCnt].oldonmouseover=document.all[iCnt].onmouseover; document.all[iCnt].onmouseover=function(){return false;}}catch(e){;} try{document.all[iCnt].oldonmousemove=document.all[iCnt].onmousemove; document.all[iCnt].onmousemove=function(){return false;}}catch(e){;} try{document.all[iCnt].oldonkeydown=document.all[iCnt].onkeydown; document.all[iCnt].onkeydown=function(){return false;}}catch(e){;} try{document.all[iCnt].oldoncontextmenu=document.all[iCnt].oncontextmenu; document.all[iCnt].oncontextmenu=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].onmousedown=document.all[iCnt].oldonmousedown;}catch(e){;} try{document.all[iCnt].onclick=document.all[iCnt].oldonclick;}catch(e){;} try{document.all[iCnt].onmouseover=document.all[iCnt].oldonmouseover;}catch(e){;} try{document.all[iCnt].onmousemove=document.all[iCnt].oldonmousemove;}catch(e){;} try{document.all[iCnt].onkeydown=document.all[iCnt].oldonkeydown;}catch(e){;} try{document.all[iCnt].oncontextmenu=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代码在点击打开链接.
相关文章推荐
- 如何把 XML 数据显示为 HTML(加载XML/XSL几种方式)
- iOS 用webView加载后台返回的HTML数据
- 解决html 加载同名图片或flash存在数据缓存问题
- 跳转页面的加载数据提示
- loadDataWithBaseURL加载HTML数据
- dwz ie10一直提示数据加载中
- JSP如何做"正在加载数据,请稍等..."这样的提示页面 loding。。。
- 混合开发之webView加载html,android 和 html之间进行数据交互
- Android菜鸟学习笔记(WebView加载html页面,页面提交数据问题)
- JQuery easyUI和HTML动态加载combox数据项
- android 登陆、提交数据或加载数据时提示页面
- android的progressDialog 的使用。android数据异步加载 对话框提示
- jquery mobile 请求数据方法执行时显示加载中提示框
- 利用Javascript解决HTML大数据列表引起的网页加载慢/卡死问题。
- js中对arry数组的各种操作小结 瀑布流AJAX无刷新加载数据列表--当页面滚动到Id时再继续加载数据 web前端url传递值 js加密解密 HTML中让表单input等文本框为只读不可编辑的方法 js监听用户的键盘敲击事件,兼容各大主流浏览器 HTML特殊字符
- AF请求数据失败,提示Request failed: unacceptable content-type: text/html
- JQuery和原生JS跨域加载JSON数据或HTML。
- 加载数据前:显示提示数据正在加载
- iOS中加载HTML数据,并点击图片或链接进行相应的操作
- iOS开发 webView加载html数据