[ASP.NET] 使用Loading遮罩防止使用者重複點擊
From: http://www.dotblogs.com.tw/joysdw12/archive/2012/12/13/85629.aspx
前言
在網頁執行中可能會因為資料量大或其他原因影響使用者按下按鈕時頁面還在讀取而停住等待的情況發生,當碰到這種情況時,使用者可能以為沒按到而重複點擊按鈕,而導致重複送出的問題發生,碰到這種問題我們可以使用簡單的jQuery與Css代碼來處理,請看範例:
範例
首先先去找一張 Loading 的圖片,如下:
接下來編寫HTML碼,建立DIV標簽放置相關內容,如下:
<div id="divProgress" style="text-align:center; display: none; position: fixed; top: 50%; left: 50%;" >
<asp:Image ID="imgLoading" runat="server" ImageUrl="~/Images/loading.gif" />
<br />
<font color="#1B3563" size="2px">資料處理中</font>
</div>
<div id="divMaskFrame" style="background-color: #F2F4F7; display: none; left: 0px;
position: absolute; top: 0px;">
</div>
最後在加上控制顯示或隱藏的jQuery代碼即可,如下:
// 顯示讀取遮罩
function ShowProgressBar() {
displayProgress();
displayMaskFrame();
} // 隱藏讀取遮罩
function HideProgressBar() {
var progress = $('#divProgress');
var maskFrame = $("#divMaskFrame");
progress.hide();
maskFrame.hide();
}
// 顯示讀取畫面
function displayProgress() {
var w = $(document).width();
var h = $(window).height();
var progress = $('#divProgress');
progress.css({ "z-index": , "top": (h / ) - (progress.height() / ), "left": (w / ) - (progress.width() / ) });
progress.show();
}
// 顯示遮罩畫面
function displayMaskFrame() {
var w = $(window).width();
var h = $(document).height();
var maskFrame = $("#divMaskFrame");
maskFrame.css({ "z-index": , "opacity": 0.7, "width": w, "height": h });
maskFrame.show();
}
之後我們只要在要使用的按鈕上加入 onClientClick 事件觸發 ShowProgressBar(); 即可,如下:
<asp:Button ID="Button1" runat="server" onclick="Button1_Click" Text="送出" OnClientClick="ShowProgressBar();" />
結果如下:
如此就以簡單的方法防止,並且也不會讓使用者不知所措,使用觀感也會好一點嘍。
[ASP.NET] 使用Loading遮罩防止使用者重複點擊的更多相关文章
- ASP FSO操作文件(复制文件、重命名文件、删除文件、替换字符串)
ASP FSO操作文件(复制文件.重命名文件.删除文件.替换字符串)FSO的意思是FileSystemObject,即文件系统对象.FSO对象模型包含在Scripting 类型库 (Scrrun.Dl ...
- WPF loading遮罩层 LoadingMask
原文:WPF loading遮罩层 LoadingMask 大家可能很纠结在异步query数据的时候想在wpf程序中显示一个loading的遮罩吧 今天就为大家介绍下遮罩的制作 源码下载 点击此处 先 ...
- 【EXCEL】簡単に重複探し
下記のような表があって.重複があるかどうか探すのが大変と思いますが. 簡単に重複探す方法を紹介します. Step1.重複を探す(例えこちらでは項目)を選択します. Step2.メニューで 条件付き書式 ...
- SQL Sever 刪除重複數據只剩一條
use book go create table ##T1( n int, a nvarchar(20) ) --查詢重複記錄,插入臨時表 insert into ##T1(n,a) select s ...
- 扩展easyui.datagrid,添加数据loading遮罩效果代码 --来自网摘收集
//jquery.datagrid 扩展 (function (){ $.extend($.fn.datagrid.methods, { //显示遮罩 loading: function(jq){ r ...
- jQuery扩展easyui.datagrid,添加数据loading遮罩效果代码
//jquery.datagrid 扩展加载数据Loading效果 (function (){ $.extend($.fn.datagrid.methods, { //显示遮罩 loading: fu ...
- 【WPF】BusyIndicator做Loading遮罩层
百度了一下,粗略看了几个国内野人的做法,花了时间看下去感觉不太好用(比如有Loading居然只是作为窗体的一个局部控件的,没法全屏遮罩,那要你有何用?),于是谷歌找轮子去. 好用的轮子:http:// ...
- JS-easyui 扩展easyui.datagrid,添加数据loading遮罩效果代码
(function (){ $.extend($.fn.datagrid.methods, { //显示遮罩 loading: function(jq){ return jq.each(functio ...
- 一个Loading 遮罩效果
1.需要两个DIV,一个用来遮罩,另一个用来显示Loading图片和文字(初始时它们是隐藏的) .gdiv_over { display: none; position: absolute; top: ...
随机推荐
- Android热修复
https://github.com/WeMobileDev/article/blob/master/%E5%BE%AE%E4%BF%A1Android%E7%83%AD%E8%A1%A5%E4%B8 ...
- JavaWeb 7 Servlet
7 Servlet Servlet学习的大纲:1. servlet概念及相关接口简介2. servet 执行过程3. servlet路径映射4. 缺省servlet --应用5. s ...
- J2EE 第二阶段项目之编写代码(四)
我的任务就是项目统计. 1 效益统计 1 教育效益统计表 (教育效益统计表,增,改,查看,查) 2 农牧林效益统计表 (农牧林效益统计表,增,改,查看,查) 3 乡村效益统计表 (乡村效益统计表 ...
- graph-tool 练习
如何使用graph-tool模块,如何导入?如何使用graph,使用其算法? 如何使用Boost Graph库,安装,测试? 1 创建和操纵图 如何创建空图? g = Graph() 如何精准的创建有 ...
- ajax再接触
贴三个目前写的已经工作了的ajax,并且给出备注: 1.这是第一个ajax以及它的接口文档,需要注意的是1.因为返回数据是xml所以多加了contentType:"application/x ...
- 【bzoj1019】汉诺塔
[bzoj1019]汉诺塔 题意 传送门:http://www.lydsy.com/JudgeOnline/problem.php?id=1019 分析 思路1:待定系数+解方程 设\(f[n]\)为 ...
- Timer与TimerTask的真正原理&使用介绍
转载: Timer与TimerTask的真正原理&使用介绍 其实就Timer来讲就是一个调度器,而TimerTask呢只是一个实现了run方法的一个类,而具体的TimerTask需要由你自己来 ...
- as(C# 参考)
原文地址:https://msdn.microsoft.com/zh-cn/library/cscsdfbt(v=vs.110).aspx 可以使用 as 运算符执行转换的某些类型在兼容之间的引用类型 ...
- mysql 各种运算对于null值的处理
1.A,B,C作为列名时,任意一项为null 则A+B+C为null; 2.count对于null值处理; count(*)包含null项:count(具体列名)忽略null项;count(null) ...
- 如何处理PHP和MYSQL的并发以及优化
sql优化,数据缓存和页面静态化首先各种优化程序逻辑优化数据库优化硬件横向扩展数据hash.服务器提升性能.表hash.出钱找oraclec出解决方案页面静态化:Php页面静态化有两种,第一,php模 ...