项目完成了不过因为FileNet加载数据比较慢,所以3-4条记录加载也至少要10几秒,所以客户提出要有一个提示”提示数据加载,请稍后……“这个问题。这个东西开始实现起来不太容易。开始有一个解决方案就是利用一个div,在div里面使用背景图片,加载一个gif动态的图片,再利用div的display可以实现提示。不过这个方法明显的不合适,所以又换了一种实现方式。
效果如下图所示。
js代码如下
var oProgressLayer=null;
function SetBusy(){
for(var iCnt=0;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
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=
'
'
'+
'
'+
''+
'正在处理数据,请稍候……'+
'
'+
'
'+
'
';
document.body.appendChild(oProgressLayer);
//SetBusy();
}这个提示框只是一个提示消息,当然不能阻止用户那好奇的鼠标,下面的的js代码是阻止用户对页面进行操作的
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
{
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
{
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;
}
在jsp页面初始化是调用
ShowProgressInfo();
然后在数据加载完成以后调用
HideProgressInfo();
其他的都不用调用另外如果对图片觉得不满意可以可以更换图片,需要修改代码为src部分
'
'
'+
'
'+
''+
'正在处理数据,请稍候……'+
'
'+
'
'+
'
这部分代码能完成所需功能,不过不过比较完整的功能。完整的js代码在点击打开链接.