jquery.blockUI添加加载遮罩

最新推荐文章于 2020-05-19 16:41:28 发布

Bert__

最新推荐文章于 2020-05-19 16:41:28 发布

阅读量1.1k

点赞数

分类专栏： Jquery 文章标签： Jquery

本文链接：https://blog.csdn.net/BobChao0730/article/details/51248536

版权

Jquery 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

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遮罩使用的图片

四、效果图

Bert__

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jquery.blockUI添加加载遮罩

jQuery BlockUI插件可以在不锁定浏览器的同时，模拟同步模式下发起Ajax请求的行为。该插件激活时，会阻止用户在页面进行的操作，直到插件被关闭。BlockUI通过向DOM中添加元素实现其外观和组织用户交互的行为。一、psgInfoReport.jsp添加遮罩旅客信息统计 " type="text/css" rel="stylesheet" me
复制链接

扫一扫