整体描述:
当客户点击“查询”按钮时,页面回馈一个“等待中……”的提示,同时对整个页面进行遮罩处理,提升客户体验
所使用框架
使用Jquery的BlockUI Plugin实现,官网地址:
http://www.malsup.com/jquery/block/
步骤
1.引用js库文件
在页面引用库文件“BlockUI.js"
<!-- 等待界面的引用 -->
<script type="text/javascript" src="<%=request.getContextPath()%>/page/javascript/acc/BlockUI.js"></script>
2.当点击“查询”按钮时,加入等待界面的代码
查询按钮:<div class="conditionAlone"><input type="button" id="searchButton" value="查 询" tips="点击此按钮或按下<br/>键盘Enter键查询" οnclick="return checkFormAjax()"/></div>
checkFormAjax()函数中添加:
<div class="conditionAlone"><input type="button" id="searchButton" value="查 询" tips="点击此按钮或按下<br/>键盘Enter键查询" οnclick="return checkFormAjax()"/></div>
// 用户等待画面,使用 Jquery BlockUI实现
$('body').block( {
message : '<h1>正在查询,请稍候……</h1>',
css : {
border : '3px solid khaki'
}
});
3.数据加载完毕,取消遮罩
在$.ajax的complete中加入代码:
$.ajax( {
type : "POST",
url : "commitStatisticsData.sp",
data : {
dateStart : dateStart,
dateEnd : dateEnd,
selectOrgan : selectOrgan
},
complete : function() {
// 数据加载完毕,取消等待画面的遮罩效果
$.unblockUI();
},
success : function(data) {……}
});
效果图: