项目经验 jsp页面锁屏正在加载的效果

来源：互联网发布：阿里云解析域名教程编辑：程序博客网时间：2024/06/07 13:30

第一种方法：首先写两个js方法：

function lockscreen()     {    var sWidth,sHeight;     sWidth=screen.width;     sHeight=screen.height;       var bgObj=document.createElement("div");     bgObj.setAttribute('id','bgDiv');     //bgObj.innerHTML="<br /><br /><br /><br /><b>The Screen Lock Means That You Can't Click Any Button Or Link On The Page~!     <a href="javascript:window.location.reload();" mce_href="javascript:window.location.reload();">unlock screen</a></b>"  bgObj.style.position="absolute";     bgObj.style.top="0";     bgObj.style.background="#cccccc";     //bgObj.style.filter="progid:DXImageTransform.Microsoft.Alpha(style=3,opacity=25,finishOpacity=75";     bgObj.style.opacity="0.6";     bgObj.style.left="0";     bgObj.style.width=sWidth + "px";     bgObj.style.height=sHeight + "px";     bgObj.style.zIndex = "100";     document.body.appendChild(bgObj);     }  function unlock(){$("#bgDiv").remove();}

然后在jsp页面中调用：

//导入入流数据function importInFlowExcel(){var fom=document.getElementById('form1');var fileValue = $$("iffile").value;if(!validate(fileValue)){return;}var ajaxbg = $("#background,#progressBar"); lockscreen();ajaxbg.show(); <%-- Ext.getBody().mask("<div style='margin-left:40%;top:180px;px;position:relative;width:300px;height:200px;color:#3e72b9'><img src='<%=basePath%>images/icon/waiting.gif'>请稍等，正在导入...","x-mask-loading</div>"); --%>Ext.Ajax.request({ form:fom, url:'<%=basePath%>forcast/ycybfaxx/importInFlowExcel.action', method:'post',  success: function(response, options) {//  Ext.getBody().unmask();ajaxbg.hide();  unlock(); var alarms = eval('('+response.responseText+')');if(!alarms["success"]){showMsg("导入入流数据失败，请检查数据格式");}else{var dvcontent = $$('dv-content1'); inflowlist = alarms.data; var str =""; str = str+"<table  width='180px' border='1' cellspacing='0' cellpadding='0' class='altrowstable' style='margin:0px auto;'> "; str = str+"<tr class='headcolor' align='center' height='14px'><td nowap='nowap' width='60px'>时间</td><td nowap='nowap' width='60px'>距离</td><td nowap='nowap' width='60px'>入流流量</td></tr>"; for (var i = 0; i < alarms.data.length; i++) { str = str+"<tr><td width='60px'>"+alarms.data[i].time+"</td>"; str = str+"<td width='60px'>"+alarms.data[i].distance+"</td>"; str = str+"<td width='60px'>"+alarms.data[i].inflow+"</td>"; str = str+"</tr>";  } str = str+"</table>"; dvcontent.innerHTML =str;showMsg('导入入流数据成功');} },    failure:function(){    showMsg('导入入流数据失败，请检查数据格式');        } });}

在css中配上backgroud progressBar样式：

<!--加载效果-->.background { display: block; width: 200px; height: 30px; opacity: 0.4; filter: alpha(opacity=40); background:while; position: absolute; top: 0; left: 0; z-index: 2000; } .progressBar { border: 0; background: white url(progressBar_m.gif) no-repeat 10px 10px; background:url(http://ok22.org/upload/images/20110902143538381.gif) no-repeat 0 center;padding-left:35px;display:inline-block;} .progressBar { display: block; width: 200px; height: 30px; position: fixed; top: 50%; left: 50%; margin-left: -74px; margin-top: -14px; padding: 10px 10px 10px 50px; text-align: left; line-height: 27px; font-weight: bold; position: absolute; z-index: 2001; }

在html中配上backgroud progressBar 两个div：

<body><div id="dv-pageoutline">        <div id="dv-page">            <!-- 头部 -->            <div id="dv-header">                <jsp:include page="/module/common/header.jsp"></jsp:include>            </div>    <!--内容-->        <div id="dv-content"> <div id="dv-middle-panel"><div id="background" class="background" style="display: none; "></div> <div id="progressBar" class="progressBar" style="display: none; ">正在操作，请稍等...</div><form name="form" id="formId"  method="post" enctype="multipart/form-data">

0 0