jquery.blockUI添加加載遮罩

原創

2020-02-22 19:35

jQuery BlockUI插件可以在不鎖定瀏覽器的同時，模擬同步模式下發起Ajax請求的行爲。該插件激活時，會阻止用戶在頁面進行的操作，直到插件被關閉。BlockUI通過向DOM中添加元素實現其外觀和組織用戶交互的行爲。

一、psgInfoReport.jsp添加遮罩

<%@ page pageEncoding="UTF-8"%>
<%@ 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>

二、loading.jsp遮罩加載頁面

<%@ 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遮罩使用的圖片