jquery插件源碼:

/**

* 對(duì)jquery中$.ajax進(jìn)行封裝，以便加入鎖屏功能

* isAsync 是否為異步請(qǐng)求，默認(rèn)為true

* isLock 是否鎖屏，默認(rèn)是true

* isCache 是否從瀏覽器緩存中加載信息，默認(rèn)是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);

}

總結(jié)

以上是生活随笔為你收集整理的ajax 加载 提示 锁屏,js锁屏解屏通过对$.ajax进行封装实现的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。