Home >Web Front-end >JS Tutorial >js lock screen unlocking is implemented by encapsulating $.ajax_javascript skills

js lock screen unlocking is implemented by encapsulating $.ajax_javascript skills

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB
WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOriginal
2016-05-16 16:40:311287browse

jquery plug-in source code:

/**
* 对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);

Lock screen style:

/*
锁屏
*/

.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>

How to use

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

Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn