js鎖屏解屏通過對$.ajax進行封裝實現_javascript技巧

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;}

<div class="lockDiv"></div><div class="lockDivInfo" ><img id="CloseDiv" src="/hnhd/images/circle_animation.gif"></img></div>

使用方法

//查詢$("#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);}