JQuery 数据加载中禁止操作页面
比较常见的做法，但对我而言是第一次做，记录一下。
为了把找来的loading.gif 的背景色设置为透明，还特意装了quicktime。
有学到一些额外的东西。
先将div及img定义好
<body>
<div id="loadingDiv">
<img src="loading.gif" style="margin-top:230px;margin-left:700px;" />
</div>
</body>
注意：在img内可以用margin-top 和 margin-left 将loading的图片调整到列表正中央。
css样式(重点)
#loadingDiv {
background-color:grey;
filter: alpha(opacity=50); <!--IE的透明度-->
opacity: 0.1;<!--透明度，数值越大越透明，不要调太小，不然gif图片会特别模糊-->
display: none;
position: absolute;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
z-index: 100; <!--此处的图层要大于页面-->
display:none;
}
注意：此处用的id样式，页面初始化即启用，且已在样式内将该div设置为不显示。
之后将在js内动态调整它的隐藏与显示属性。当它显示时，将会遮盖住整个body，
用户无法对页面进行任何操作。
javascript代码：
function loadData(){
//弹出遮盖层
$("#loadingDiv").fadeTo(200,0.5);
$.ajax({
url: 'xx/xx!query.action',
dataType:"json",
type: 'POST',
success: function(data) {
//此处是加载列表数据的代码
//数据加载完毕，则关闭遮盖层
$("#loadingDiv").fadeOut(200);
}
});
}
注意：这里用了fadeTo和fadeOut来显示和隐藏div，当然也可以用 show 和 hide。
JQuery 数据加载中禁止操作页面的更多相关文章
- JQuery插件：遮罩+数据加载中。。。（特点：遮你想遮，罩你想罩）
在很多项目中都会涉及到数据加载.数据加载有时可能会是2-3秒,为了给一个友好的提示,一般都会给一个[数据加载中...]的提示.今天就做了一个这样的提示框. 先去jQuery官网看看怎么写jQuery插 ...
- jQuery实现加载中效果,防止重复提交
//导出表格加载中的提示var dian=0;//控制'●'的个数var t=null;//停止时使用function id_loadspot(loadspotSpan,loadingDiv,expo ...
- dwz ie10一直提示数据加载中
dwz js资源jquery.validate.js 搜索 this.attr('novalidate', 'novalidate'); 在33行左右 用if (typeof (Worker) !== ...
- layui数据加载中遮罩层的实现
1.load方法提供三种风格供选择. 方法一:loadIndex = layer.load(); //不传参,默认0 方法二:loadIndex = layer.load(1); // 1,另外一种风 ...
- APP中数据加载的6种方式-b
我们看到的APP,往往有着华丽的启动界面,然后就是漫长的数据加载等待,甚至在无网络的时候,整个处于不可用状态.那么我们怎么处理好界面交互中的加载设计,保证体验无缝衔接,保证用户没有漫长的等待感,而可以 ...
- javascript 实现页面加载完的操作
document.onreadystatechange = function () { if (document.readyState == "complete") {//页面加载 ...
- App6种常见的数据加载设计
App6种常见的数据加载设计 设计师在进行APP设计的设计时,往往会更加专注于界面长什么样,界面和界面之间怎么跳转,给予用户什么样的操作反馈,却偏偏特别容易忽略掉一个比较重要的环节,就是APP数据加载 ...
- jQuery-介绍 加载 选择器 样式操作 属性操作 绑定click事件
jQuery - 介绍 加载 选择器 样式操作 属性操作 绑定click事件 注意:以下部分问题不能实现效果,因该是单词拼写错误(少个t)或者没有加引号(“swing”)... jquery介绍 jQ ...
- EasyUI datagrid 数据加载
网上找了好多人的方法发现都有问题发一个可用方便的 主要分三种情况 加载1,loaddata 加载2,datagrid 加载3, url 加载 第一部分,datagrid加载 第二部分,点击 datag ...
随机推荐
- C# 泛基
1 你有时候希望在父类规定一些行为,让子类无法修改,但是这些实现是依赖一个子类才能获取的值,你又不可能知道所有的子类 ,没办法替它在父类里面初始化,这时候就需要在父类里面定义一个每个子类一个的,但又是 ...
- 30.3 FCL中的混合构造
30.3.2 Monitor类和同步块 internal sealed class Transaction { private readonly object _lock = new object( ...
- 踪电子表格中的单元格（Spreadsheet Tracking, ACM/ICPC World Finals 1997, UVa512）
有一个r行c列(1≤r,c≤50)的电子表格,行从上到下编号为1-r,列从左到右编号为1 -c.如图4-2(a)所示,如果先删除第1.5行,然后删除第3, 6, 7, 9列,结果如图4-2(b) 所示 ...
- 让TP5.0在SWOOLE上飞起来
TP-SWOOLE 目前,TP5.1官方已经提供了think-swoole2.0,集成程度以前优雅很多,不过5.0的集成方式确实有些鸡肋.所以看了下2.0,为5.0开发了一个扩展包,可以采用compo ...
- 【Codeforces 126B】Password
[链接] 我是链接,点我呀:) [题意] 给你一个字符串s 让你从中选出来一个字符串t 这个字符串t是s的前缀和后缀 且在除了前缀和后缀之外的中间部位出现过. 且要求t的长度最长. 让你输出这个字符串 ...
- 【codeforces 508A】Pasha and Pixels
[题目链接]:http://codeforces.com/contest/508/problem/A [题意] 让你在一个n*m的方格上给方格染色; 顺序给出染色的k个格子 如果在某一时刻 有一个2* ...
- Android学习总结（5）——9个非常有用的Andorid 程序片段
一,获取系统版本号: PackageInfo info = this.getPackageManager().getPackageInfo(this.getPackageName(), 0); int ...
- Eleastisearch6.0.0 read_only_allow_delete: false
Eleastisearch6.0.0由单节点升级到多节点集群cluster时候出现的分片同步错误问题解决 原创 2018年01月18日 16:33:21 5 启动多个节点的ES后,ES开始推举mast ...
- LSB、MSB是什么单位
最低有效位 (LSB: Least Significant Bit) 最低有效位(LSB)是给这些单元值的一个二进制整数位位置,就是,决定是否这个数字是偶数或奇数.LSB有时候是指最右边的位,因为 ...
- Openfire：解决乱码问题
当部署openfire后,创建用户和发送离线消息时会出现中文字符乱码的问题.要解决这个问题需要同时配置openfire和mysql两端. 首先openfire端,在安装页面中指定odbc连接串中需要带 ...