首页 > 编程 > JavaScript > 正文

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

2019-11-20 14:18:30
字体:
来源:转载
供稿:网友

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

发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表