jQuery实现加载中效果,防止重复提交
//导出表格加载中的提示
var dian=0;//控制'●'的个数
var t=null;//停止时使用
function id_loadspot(loadspotSpan,loadingDiv,exportLink){
loadingDiv.css('visibility','visible');//显示
exportLink.click(function(){//使链接失效
return false;
});
t=setTimeout(function() {
if (dian >= 3) {
loadspotSpan.text('');
dian = 0;
} else {
dian++;
loadspotSpan.text(loadspotSpan.text() + '●');
}
id_loadspot(loadspotSpan,loadingDiv,exportLink);//递归调用
}, 1000);
}
//停止加载中的提示
function stop_id_loadspot(loadingDiv,exportLink){
clearTimeout(t);//停止定时器
loadingDiv.css('visibility','hidden');//隐藏
exportLink.unbind("click");//使链接生效
}
//页面
<div style="width: 10%; height: 30px; float: right; text-align: left;">
<a href="javascript:exportMerchantExcel();" style="text-align: center;" class="audit" id="exportLink">导出</a>
<div style="display: inline-block;visibility:hidden; width: 66px; text-align: left;" id="loadingDiv">
加载中<span id="id_loadspot"></span>
</div>
</div>
//使用
seachKey = $("#merchantName").val();
status =$('#upsfyx').combobox('getValue');
//加载中...
id_loadspot($('#id_loadspot'),$("#loadingDiv"),$("#exportLink"));
$.ajax({
url : '../system/cisweb/exportMerchantExcel',
dataType : "json",
type : "post",
data : {
seachKey : seachKey,
status:status,
},
success : function(data) {
if (data.status == "succeed") {
$("#download").attr("href", data.path);
$("#subBtn").trigger("click");
} else {
$.messager.alert('提示', data.msg, 'error');
}
},
error : function(err) {
$.messager.alert('提示', err.msg, 'error');
},
complete:function(jqXHR, textStatus){
stop_id_loadspot($("#loadingDiv"),$("#exportLink"));//停止加载中的提示
}
});
jQuery实现加载中效果,防止重复提交的更多相关文章
- 使用Bootstrap3和Ladda UI实现的多种按钮“加载中”效果体验
在线演示 在线演示 大家在开发基于web的网站或者web应用中,常常在AJAX调用的过程中需要提示用户并且展示相关的“加载中”效果,类似的UI设计也非常多,比如,当点击一个按钮后,在它的旁边显示一个 ...
- WPF防止界面卡死并显示加载中效果
原文:WPF防止界面卡死并显示加载中效果 网上貌似没有完整的WPF正在加载的例子,所以自己写了一个,希望能帮到有需要的同学 前台: <Window x:Class="WpfApplic ...
- jquery mobile在页面加载时添加加载中效果 document.ready 和window.onload执行顺序比较
想要添加这个效果,先来弄明白页面的加载和事件执行顺序,看这个简单例子: <html xmlns="http://www.w3.org/1999/xhtml"> < ...
- jquery实现加载更多效果
情况是当滑动条滑动到最底部的时候,数据显示出一部分的更多 思路:获取到浏览器屏幕的高度client,文档的高度h和滑动距离顶部的距离scroll,当h<=client+scroll的时候就是滑动 ...
- JQuery 数据加载中禁止操作页面
比较常见的做法,但对我而言是第一次做,记录一下. 为了把找来的loading.gif 的背景色设置为透明,还特意装了quicktime. 有学到一些额外的东西. 先将div及img定义好 <bo ...
- Android 三种方式实现自定义圆形页面加载中效果的进度条
转载:http://www.eoeandroid.com/forum.php?mod=viewthread&tid=76872 一.通过动画实现 定义res/anim/loading.xml如 ...
- 【转】WPF防止界面卡死并显示加载中效果
原文地址:http://www.cnblogs.com/linyijia/archive/2013/02/06/2900609.html <Window x:Class="Loadin ...
- CSS3实现加载中效果
代码: <!doctype html> <html> <head> <meta charset="utf-8" /> <tit ...
- loading加载中效果
(function(){ try{ var ui={ loading:{ addCssStyle:function(text) { var head = document.getElementsByT ...
随机推荐
- linux命令-xz压缩
xz gzip bzip2使用方法基本一样 压缩文件 [root@wangshaojun ~]# xz 111.txt[root@wangshaojun ~]# ls //////111.txt文件 ...
- shell入门-连接符(并且、和、或者)
特殊符号:&& 说明:并且,左右两边是两条命令,左面的执行成功才会去执行右面的命令.右. 特殊符号:|| 说明:或者,左右两边是两条命令,左边的命令执行不成功,才会执行右面的命令 &a ...
- redis的 key string hash list set sorted set 常用的方法
redis 安装文件: http://blog.csdn.net/tangsilai/article/details/7477961 ============================== ...
- Maven jenkins +Jmeter自动化测试
Maven jenkins +Jmeter自动化测试 1. Jenkins中集成jmeter-maven插件 http://my.oschina.net/u/1377774/blog/168969 2 ...
- 2017 world final
E 解题关键:二分时注意C函数的单调性. #include<bits/stdc++.h> #define eps 1e-8 #define INF 0x3f3f3f3f using nam ...
- AngularJs(Part 6)
Overcomming same-origin policy restrictions with JSONP. AJAX has a restriction that it can only retr ...
- 看下面代码输出结果Java
编译错误 在调用子类构造器之前,会先调用父类构造器,当子类构造器中没有使用"super(参数或无参数)"指定调用父类构造器时,是默认调用父类的无参构造器,如果父类中包含有参构造器, ...
- 使用IDEA编译netty4
本来计划一天一篇博文的,结果周末加班加的不亦乐乎,对整个项目重构添加国际化的功能,不停的使用native2ascii工具 使用IDEA编译原有的netty4要报错,我修改了下pom.xml,编译成功了 ...
- hdu1074
#include <iostream> #include <string> #include <cstring> #include <stack> #i ...
- JDK1.8的安装与卸载
Java的下载地址: https://www.java.com/zh_CN/download/ 下载完成后打开进入界面: 点击下一步, 上面也无需更改,也可自定义设置安装路径, 再次确认安装路径,点击 ...