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

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

2021-01-31 21:00whsnow JavaScript

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;

									}

				?

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

									}