ajax 加载 提示 锁屏,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;
}
使用方法
//查询
$("#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);
}
ajax 加载 提示 锁屏,js锁屏解屏通过对$.ajax进行封装实现相关推荐
- ie11 ajax 加载提示,解决在IE11浏览器下,JQuery的AJAX方法不响应问题
在项目的时候一直都是在使用谷歌浏览器在调试,后来在现场部署到服务器上的时候,客户使用的是IE浏览器,版本是11 在测试的过程中,出现几个问题,虽然是几个问题,但是问题的原因就是AJAX第一次响应,第二 ...
- google支持本地ajax,360chrome,google chrome浏览器使用jquery.ajax加载本地html文件
使用360chrome和google chrome浏览器加载本地html文件时,会报错,提示: XMLHttpRequest cannot load file:///Y:/jswg/code/html ...
- jQuery Mobile 手动显示ajax加载器,提示加载中...
在使用jQuery Mobile开发时,有时候我们需要在请求ajax期间,显示加载提示框(例如:一个旋转图片+一个提示:加载中...).这个时候,我们可以手动显示jQuery Mobile的加载器,大 ...
- 函数内的ajax同步请求导致遮罩层失效、或者导致loading正在加载提示失效问题
功能需求 编写点击按钮,弹出loading遮罩层提示正在加载中-,同时查询后台信息,拼接数据后渲染到列表时,为了保障渲染时,列表中的数据已经拼接完成.所以在for循环中使用同步ajax进行请求,在su ...
- web页面到ajax,页面使用ajax加载页面后如果运行其中的js,webpack如何多页面展示...
1.页面使用了sui-mobile这个框架,其中的页面路由部分会使用ajax加载页面.虽然每次都能加载到下一个页面,但是会出现加载到的页面中的js不去执行的情况. 2.页面打包使用了webpack,现 ...
- ajax加载vue数据,详解使用Vue.Js结合Jquery Ajax加载数据的两种方式
整理文档,搜刮出一个使用vue.js结合jquery ajax加载数据的两种方式的代码,稍微整理精简一下做下分享. 废话不多说,直接上代码 html代码 demo {{message }} 测试jqu ...
- jquery中ajax加载js和json文件
全栈工程师开发手册 (作者:栾鹏) jquery系列教程6-AJAX全解 jquery中ajax加载js文件 jquery中ajax加载js文件的函数为getScript() 代码如下: $.getS ...
- ajax异步加载延时问题,关于js延迟加载(异步操作)的方式
一.概述 最近重新开始学习js,在第一章的一个小节里写到了"脚本调用策略",书上写的这部分不多,但是发现在我之前的(笔)面试中,问到的频率还是比较高的.自己一直习惯于直接把所有js ...
- ajax加载远程数据
ajax加载远程数据 概述 回调函数 数据类型 发送数据到服务器 高级选项 实例 概述 通过 HTTP 请求加载远程数据. jQuery 底层 AJAX 实现.简单易用的高层实现见 $.get, . ...
最新文章
- sudo 密码超时时间
- Windows Phone 开发——相机功能开发
- c++函数内部可以返回函数内部定义的指针 但是不能返回函数内部定义的数组...
- 变阻感器测量位移的计算机流程图,传感器工作流程图
- yii2 请求外部api_微服务架构之「 API网关 」
- python调用caffe环境配置
- Java面试知识点手工笔记(推荐)(转)
- 软件架构分类(转载)
- 【ArcGIS|空间分析】志愿者分配管理区域内共享单车(全国大学生GIS技能大赛试题)
- Qt Sqlite中替换部分字符串
- 学习Java需要掌握哪些知识,初学者必备
- Python实现的图片转字符画,附源码
- 谱尼医学幽门螺旋杆菌快速检测 三步直达 欢迎选测~
- vios aix_为AIX或VIOS选择多路径路径控制模块的指南
- 实时语音视频通话SDK如何实现立体声(一)
- centos下安装firefox
- 巧妙地帮你的手机节省流量,担心流量超出的机友们看过(转)
- Unity Obi插件修改到支持URP
- 【操作系统】一起了解操作系统咯 | 原码,反码,补码,你理解到位了吗?
- 什么是堡垒机?堡垒机有什么优势?