js锁屏解屏通过对$.ajax进行封装实现

时间:2021-05-26

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

声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。

相关文章