jQuery BlockUI插件可以在不锁定浏览器的同时，模拟同步模式下发起Ajax请求的行为。该插件激活时，会阻止用户在页面进行的操作，直到插件被关闭。BlockUI通过向DOM中添加元素实现其外观和组织用户交互的行为。
一、psgInfoReport.jsp添加遮罩
<%@ page pageEncoding="UTF-8"%>二、loading.jsp遮罩加载页面
<%@ include file="/common/taglibs.jsp"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>旅客信息统计</title>
<%@ taglib uri="extremecomponents" prefix="ec"%>
<link href="<c:url value='/styles/extremecomponents.css'/>" type="text/css" rel="stylesheet" media="all" />
<link href="<c:url value='/styles/easyui.css'/>" type="text/css" rel="stylesheet">
<link href="<c:url value='/styles/icon.css'/>" type="text/css" rel="stylesheet">
<link href="<c:url value='/styles/layout.css'/>" type="text/css" rel="stylesheet" media="all" />
<link rel="stylesheet" type="text/css" media="all" href="<c:url value='/styles/tab.css'/>" />
<script src="<c:url value='/scripts/common.js'/>"></script>
<script src="<c:url value='/scripts/jquery.js'/>"></script>
<script src="<c:url value='/scripts/jquery.easyui.min.js'/>"></script>
<script src="<c:url value='/scripts/easyui-lang-zh_CN.js'/>"></script>
<script src="<c:url value='/scripts/datePicker/WdatePicker.js'/>" language="javascript"></script>
<script type="text/javascript">
var GB_ROOT_DIR = "./scripts/greybox/";
</script>
<script src="<c:url value="/scripts/greybox/AJS.js"/>"
language="javascript"></script>
<script src="<c:url value="/scripts/greybox/AJS_fx.js"/>"
language="javascript"></script>
<script src="<c:url value="/scripts/greybox/gb_scripts.js"/>"
language="javascript"></script>
<link rel="stylesheet" type="text/css" media="all"
href="<c:url value='/scripts/greybox/gb_styles.css'/>" />
<script language="JavaScript" type="text/JavaScript">
//关闭加载框
var checkExport = function(){
if(getCookie('exporting') != '1'){
$.unblockUI();//取消遮罩
}
}
//导出
var exportExcel = function(){
var startDate = $("#startDate").val().replace(/-/g,"/");
var endDate = $("#endDate").val().replace(/-/g,"/");
if(validateDateBeyond(startDate,endDate,5)){
alert("起止时间段不能超过5天");
return false;
}
var fileName = 'passengerInfoList'+$("#startDate").val().replace(/-/g,"")
+'-'+$("#endDate").val().replace(/-/g,"");
if( $('#flt_num').val()!='' ){
fileName+=$('#flt_num').val();
}
fileName+='.xls';
$('#psgInfoSearchForm').attr('action','./psgInfoSearch.html?method=psgInfoView&export=1&fileName='+fileName);
if($('#psgInfoSearchForm').form('validate')){
addCookie('exporting','1',10);//添加导出标志cookie
setInterval("checkExport()",1000);//1s检查一次
psgInfoSearchForm.submit();
$.blockUI({ message: $("#loading").html(),css:{width:'400',height:'50',border:'0'} });//添加遮罩
}else{
return false;
}
}
//页面加载时初始化
$().ready(function(){
$("select").find("option[index='0']").val("<c:out value="${psgInfoSearchForm.status}"/>");
});
</script>
</head>
<body leftmargin="0" topmargin="0">
<%@include file="/common/loading.jsp"%>
<html:form action="psgInfoSearch.html?method=psgInfoView" method="post" styleId="psgInfoSearchForm">
<input type="hidden" id='export'/>
<table width="100%" height="100%" border="0" cellpadding="0"
cellspacing="0">
</table>
</body>
</html>
<%@ page pageEncoding="utf-8"%>
<script src="<c:url value='/scripts/jquery.blockUI.js'/>"
language="javascript"></script>
<div id="loading" style="display:none" >
<br/>
<span class="black12">正在处理，请稍等......</span><br/>
<span><img src="images/loading2.gif"/></span>
</div>
三、loading2.gif遮罩使用的图片
四、效果图
