ajax 加载 提示 锁屏,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

});

});

//锁屏方法

function lockSrc(){

$(".lockDiv").css({"opacity":"0.5"}).fadeIn('normal');

var scrollWidth = document.documentElement.clientWidth;//document.body.clientWidth;

var scrollHeight =document.documentElement.clientHeight; // document.body.clientHeight;

var divWidth = $(".lockDivInfo").width();

var divHeight = $(".lockDivInfo").height();

var divLeft = scrollWidth/2-divWidth/2;

var divTop = 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');

}

//解屏方法

function unlockSrc(){

$(".lockDivInfo").fadeOut('normal');

$(".lockDiv").fadeOut('normal');

}

function toError(){

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;

}

使用方法

//查询

$("#queryBtn").click(function(){

selecCheckByRegionApp.query();

});

var selecCheckByRegionApp={};

selecCheckByRegionApp.query=function(){

var settion={

type:"post",

url: 'selfCheckStatisticAction!findByRegion' ,

dataType:"text",

data:$("#searchForm").formSerialize(),

success:function(msg){

$("#contentDiv").html(msg);

}

};

$("#queryBtn").doPost(settion);

}