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

来源：互联网发布：数据挖掘从应用心得编辑：程序博客网时间：2024/05/16 08:01

整体描述：

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

所使用框架

使用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键查询" onclick="return checkFormAjax()"/></div>

checkFormAjax()函数中添加：

// 用户等待画面，使用 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) {……}});

效果图：

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

0 0