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进行封装实现相关推荐

  1. ie11 ajax 加载提示,解决在IE11浏览器下,JQuery的AJAX方法不响应问题

    在项目的时候一直都是在使用谷歌浏览器在调试,后来在现场部署到服务器上的时候,客户使用的是IE浏览器,版本是11 在测试的过程中,出现几个问题,虽然是几个问题,但是问题的原因就是AJAX第一次响应,第二 ...

  2. google支持本地ajax,360chrome,google chrome浏览器使用jquery.ajax加载本地html文件

    使用360chrome和google chrome浏览器加载本地html文件时,会报错,提示: XMLHttpRequest cannot load file:///Y:/jswg/code/html ...

  3. jQuery Mobile 手动显示ajax加载器,提示加载中...

    在使用jQuery Mobile开发时,有时候我们需要在请求ajax期间,显示加载提示框(例如:一个旋转图片+一个提示:加载中...).这个时候,我们可以手动显示jQuery Mobile的加载器,大 ...

  4. 函数内的ajax同步请求导致遮罩层失效、或者导致loading正在加载提示失效问题

    功能需求 编写点击按钮,弹出loading遮罩层提示正在加载中-,同时查询后台信息,拼接数据后渲染到列表时,为了保障渲染时,列表中的数据已经拼接完成.所以在for循环中使用同步ajax进行请求,在su ...

  5. web页面到ajax,页面使用ajax加载页面后如果运行其中的js,webpack如何多页面展示...

    1.页面使用了sui-mobile这个框架,其中的页面路由部分会使用ajax加载页面.虽然每次都能加载到下一个页面,但是会出现加载到的页面中的js不去执行的情况. 2.页面打包使用了webpack,现 ...

  6. ajax加载vue数据,详解使用Vue.Js结合Jquery Ajax加载数据的两种方式

    整理文档,搜刮出一个使用vue.js结合jquery ajax加载数据的两种方式的代码,稍微整理精简一下做下分享. 废话不多说,直接上代码 html代码 demo {{message }} 测试jqu ...

  7. jquery中ajax加载js和json文件

    全栈工程师开发手册 (作者:栾鹏) jquery系列教程6-AJAX全解 jquery中ajax加载js文件 jquery中ajax加载js文件的函数为getScript() 代码如下: $.getS ...

  8. ajax异步加载延时问题,关于js延迟加载(异步操作)的方式

    一.概述 最近重新开始学习js,在第一章的一个小节里写到了"脚本调用策略",书上写的这部分不多,但是发现在我之前的(笔)面试中,问到的频率还是比较高的.自己一直习惯于直接把所有js ...

  9. ajax加载远程数据

    ajax加载远程数据 概述 回调函数 数据类型 发送数据到服务器 高级选项 实例 概述 通过 HTTP 请求加载远程数据. jQuery 底层 AJAX 实现.简单易用的高层实现见 $.get, . ...

最新文章

  1. sudo 密码超时时间
  2. Windows Phone 开发——相机功能开发
  3. c++函数内部可以返回函数内部定义的指针 但是不能返回函数内部定义的数组...
  4. 变阻感器测量位移的计算机流程图,传感器工作流程图
  5. yii2 请求外部api_微服务架构之「 API网关 」
  6. python调用caffe环境配置
  7. Java面试知识点手工笔记(推荐)(转)
  8. 软件架构分类(转载)
  9. 【ArcGIS|空间分析】志愿者分配管理区域内共享单车(全国大学生GIS技能大赛试题)
  10. Qt Sqlite中替换部分字符串
  11. 学习Java需要掌握哪些知识,初学者必备
  12. Python实现的图片转字符画,附源码
  13. 谱尼医学幽门螺旋杆菌快速检测 三步直达 欢迎选测~
  14. vios aix_为AIX或VIOS选择多路径路径控制模块的指南
  15. 实时语音视频通话SDK如何实现立体声(一)
  16. centos下安装firefox
  17. 巧妙地帮你的手机节省流量,担心流量超出的机友们看过(转)
  18. Unity Obi插件修改到支持URP
  19. 【操作系统】一起了解操作系统咯 | 原码,反码,补码,你理解到位了吗?
  20. 什么是堡垒机?堡垒机有什么优势?

热门文章

  1. jieba中文分词源码分析(四)
  2. Yolov3网络架构分析
  3. CUDA Pro:通过向量化内存访问提高性能
  4. TVM Reduction降低算力
  5. 什么是智能医院?如何构建自己的解决方案?
  6. 线性布局上的一个小错误
  7. tp5+workman
  8. 最小化局部边际的合并聚类算法(中篇)
  9. Python学习笔记3——三大结构:顺序,分支,循环3
  10. selenium+Python(鼠标和键盘事件)