一,引入三個文件
jQuery版本使用 jQuery v1.7.1
jquery-easyui文件中,引入easyui-lang-zh_CN.js的js 做數據加載時使用
jquery.blockui.min.js 放有loading.gif圖片及樣式
<script type="text/javascript" src="js/jquery.js"></script> <script type="text/javascript" src="js/easyui-lang-zh_CN.js"></script> <script type="text/javascript" src="/js/jquery.blockui.min.js"></script>
二,html部分
①.<div id="GroPro">最外層div<div>
②.修改load未鋪滿全文的bug
獲取網頁正文全文高度：document.body.scrollHeight
<script type="text/javascript"> //初始化數據前 $(document).ready(function () { window.onload = function () { getHeight();//調用函數 }; function getHeight() { var Load = document.getElementById('GroPro');//獲取Load的高度 var body_height = document.documentElement.scrollHeight;//document.body.clientHeight中在<!DOCTYPE html>聲明下會返回0 Load.style.height = body_height + 'px';//將正文的高度賦值給Load } }); </script>
①.PageRefreshLockHolder方法(最上方)
// 頁面級刷新鎖持有（可用於防止頁面數據重復加載）
var PageRefreshLockHolder = {
// 可以注冊加鎖/解鎖的事件（暫不支持）
events:{},
// 被加鎖視圖集合
// lockedObject:{'mapView':'0', 'leftView':'0', 'rightView':'0', 'rightAvgView':'0'},
lockedObject:{'OneView':'0'},
// 加鎖動作（暫時只支持全加鎖，不支持單獨加鎖）
lockAll:function() {
jQuery("#GroPro").block();
this.lockedObject.OneView = '1';
// this.lockedObject.leftView = '1';
},
// 解鎖動作（各視圖組件調用通知解鎖）
unlock:function(viewName) {
this.lockedObject[viewName] = '0';
if (!this.isExistLock()) {
jQuery("#GroPro").unblock();
}
},
// 判斷是否有鎖
isExistLock:function() {
/*
if (this.lockedObject.mapView == '0'
&& this.lockedObject.leftView == '0'
&& this.lockedObject.rightView == '0'
&& this.lockedObject.rightAvgView == '0') {
return false;
} else {
return true;
}
*/
if (this.lockedObject.OneView == '0') {
return false;
} else {
return true;
}
}
};
②.初始化數據時先,鎖定頁面
$(function(){
// 鎖定頁面
PageRefreshLockHolder.lockAll();
});
③.賬期切換(切換按鈕時),相當於刷新數據
// 鎖定頁面
PageRefreshLockHolder.lockAll();
④.通過ajax請求數據時:(同一個頁面的數據在同一個ajax中請求完成)
$.ajax( {
success : function(data) {
//最下方
// 數據請求完,解鎖
PageRefreshLockHolder.unlock("OneView");
}
});
⑤.在刷新左右上下頁面后,解鎖
PageRefreshLockHolder.unlock("OneView");
⑥.
如果一個頁面的數據是在同一個ajax中請求的,只在一個ajax中解鎖頁面就可以了.
如果頁面中各版塊數據在不同ajax中請求的,那么需要在各個版塊的ajax中解鎖.