使用Jquery实现页面加载时的遮罩效果

整体描述：

当客户点击“查询”按钮时，页面回馈一个“等待中……”的提示，同时对整个页面进行遮罩处理，提升客户体验

所使用框架

使用Jquery的BlockUI Plugin实现，官网地址： http://www.malsup.com/jquery/block/

步骤

1.引用js库文件

在页面引用库文件“BlockUI.js"

[html] view plain copy

1. <!-- 等待界面的引用 -->  
2.         <script type="text/javascript" src="<%=request.getContextPath()%>/page/javascript/acc/BlockUI.js"></script>  

2.当点击“查询”按钮时，加入等待界面的代码

查询按钮：

[html] view plain copy

1. <div class="conditionAlone"><input type="button" id="searchButton" value="查  询" tips="点击此按钮或按下<br/>键盘Enter键查询" onclick="return checkFormAjax()"/></div>  

checkFormAjax()函数中添加：

[javascript] view plain copy

1. // 用户等待画面，使用 Jquery BlockUI实现  
2.     $('body').block( {  
3.         message : '<h1>正在查询，请稍候……</h1>',  
4.         css : {  
5.             border : '3px solid khaki'  
6.         }  
7.     });  

3.数据加载完毕，取消遮罩

在$.ajax的complete中加入代码：

[javascript] view plain copy

1. $.ajax( {  
2.         type : "POST",  
3.         url : "commitStatisticsData.sp",  
4.         data : {  
5.             dateStart : dateStart,  
6.             dateEnd : dateEnd,  
7.             selectOrgan : selectOrgan  
8.         },  
9.         complete : function() {  
10.             // 数据加载完毕，取消等待画面的遮罩效果  
11.         <span style="color:#ff0000;">$.unblockUI();</span>  
12.     },  
13.     success : function(data) {……}  
14. <span style="white-space:pre">  </span>});  

效果图：

注：BlockUI.js 的下载地址为  http://malsup.github.io/jquery.blockUI.js