js鎖屏解屏通過對$.ajax進行封裝實現(xiàn)
更新時間:2014年07月31日 09:30:39 投稿:whsnow
js鎖屏解屏是通過對$.ajax進行封裝實現(xiàn)的,需要的朋友可以參考下
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);
}
相關文章
js和html5實現(xiàn)手機端刮刮卡抽獎效果完美兼容android/IOS
手機完美支持html5,所以如果手機端想要做個抽獎模塊的話,用刮刮卡抽獎效果,相信這個互動體驗是非常棒的,本人親自完成,有錯誤請大家指出2013-11-11
HTML5 Shiv完美解決IE(IE6/IE7/IE8)不兼容HTML5標簽的方法
這篇文章主要介紹了HTML5 Shiv完美解決IE(IE6/IE7/IE8)不兼容HTML5標簽的方法,需要的朋友可以參考下2015-11-11
javascript實現(xiàn)飛機大戰(zhàn)小游戲
這篇文章主要為大家詳細介紹了javascript實現(xiàn)飛機大戰(zhàn)小游戲,文中示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下2022-05-05
如何在CocosCreator中利用常駐節(jié)點做圖層管理
這篇文章主要介紹了如何在CocosCreator中利用常駐節(jié)點做圖層管理,這些技巧非常實用,希望同學們看完,回去可以試一下2021-04-04

