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

整体描述：

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

所使用框架

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

步骤

1.引用js库文件

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

[html]
view plain
copy





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

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

查询按钮：

[html]
view plain
copy





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

checkFormAjax()函数中添加：

[javascript]
view plain
copy





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

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

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

[javascript]
view plain
copy





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

效果图：



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