js锁屏解屏通过对$.ajax进行封装实现
jquery插件源码:
/**
*对jquery中$.ajax进行封装，以便加入锁屏功能
*isAsync是否为异步请求，默认为true
*isLock是否锁屏，默认是true
*isCache是否从浏览器缓存中加载信息，默认是fasle
***/
;(function($){
$.fn.doPost=function(settings){
settings=jQuery.extend({
isAsync:true,
type:"post",
url:null,
dataType:null,
data:null,
success:null,
error:toError,
isLock:true,
isCache:false
},settings);
$(this).each(function(){
if(settings.isLock){
lockSrc();
}
$.ajax({
async:settings.isAsync,
type:settings.type,
url:settings.url,
dataType:settings.dataType,
data:settings.data,
cache:settings.isCache,
success:function(msg){
if(settings.isLock){
unlockSrc();
}
settings.success(msg);
},
error:settings.error
});
});
//锁屏方法
functionlockSrc(){
$(".lockDiv").css({"opacity":"0.5"}).fadeIn('normal');
varscrollWidth=document.documentElement.clientWidth;//document.body.clientWidth;
varscrollHeight=document.documentElement.clientHeight;//document.body.clientHeight;
vardivWidth=$(".lockDivInfo").width();
vardivHeight=$(".lockDivInfo").height();
vardivLeft=scrollWidth/2-divWidth/2;
vardivTop=scrollHeight/2-divHeight/2;
//console.log("bodyWidth="+scrollWidth+",bodyHeight="+scrollHeight+",divHeight="+divHeight+",divWidth="+divWidth+",left="+divLeft+",top="+divTop);
$(".lockDivInfo").css({"position":"absolute","top":divTop,"left":divLeft}).fadeIn('normal');
}
//解屏方法
functionunlockSrc(){
$(".lockDivInfo").fadeOut('normal');
$(".lockDiv").fadeOut('normal');
}
functiontoError(){
alert("操作失败!");
}
};
})(jQuery);
锁屏样式:
/*
锁屏
*/
.lockDiv{
width:100%;
height:100%;
display:none;
z-index:10;
background-color:#DFE8F6;
position:absolute;
top:0px;
left:0px;
}
.lockDivInfo{
width:50px;
height:2px;
display:none;
position:absolute;
left:0px;
top:0px;
z-index:11
}
#CloseDiv{
float:right;
width:100px;
height:100px;
margin-top:10px;
margin-right:10px;
}
<divclass="lockDiv"></div> <divclass="lockDivInfo"> <imgid="CloseDiv"src="/hnhd/images/circle_animation.gif"></img> </div>
使用方法
//查询
$("#queryBtn").click(function(){
selecCheckByRegionApp.query();
});
varselecCheckByRegionApp={};
selecCheckByRegionApp.query=function(){
varsettion={
type:"post",
url:'selfCheckStatisticAction!findByRegion',
dataType:"text",
data:$("#searchForm").formSerialize(),
success:function(msg){
$("#contentDiv").html(msg);
}
};
$("#queryBtn").doPost(settion);
}