[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: ...
随机推荐
- 【Todo】Python面试题分析记录(修饰器等)
首先,看这一段代码: class A(object): x = 1 gen = (lambda t: (t for _ in xrange(10)))(x) if __name__ == '__mai ...
- number-of-segments-in-a-string
https://leetcode.com/problems/number-of-segments-in-a-string/ package com.company; class Solution { ...
- Node 写文件
在程序开发过程中会遇到很多自己认为是对的但实际运行出来并不是自己想的那样的,这个时候就可以把程序运行的比较关键点用文件的方式存储下来,然后分析 node 方式 var fs = require('fs ...
- C语言 常用单词
main 主要的 printf(print format)格式输出 include , return ,if ,else ,switch ,case 机箱:案 ...
- xmpp怎么让群主踢人?
不知道其他语言版的xmpp,framework是怎样的,就OC版提供的xmpp框架来说,它只提供了邀请其他用户进群的API: - (void)inviteUser:(XMPPJID *)jid wit ...
- 配置tomcat,java运行环境
1.下载JDK,安装 官网下载地址:http://java.sun.com/javase/downloads/index.jsp 下载后,安装,选择你想把JDK安装的目录: 比如:JDK安装目录:E: ...
- PHP与Ajax的交互更新页面
PHP与Ajax的交互更新页面 本次主要学习ajax的概念以及怎么与PHP之间进行交互操作 1.什么是Ajax? 国内翻译常为“阿贾克斯”和阿贾克斯足球队同音,AJAX 是一种用于创建快速动态网 ...
- python操作mongodb之二聚合查询
#聚合查询 from pymongo import MongoClient db = MongoClient('mongodb://10.0.0.9:27017/').aggregation_exam ...
- SQL Server 2012清除连接过的服务器名称历史
退出客户端后 SQL Server 2012: 删除这两个地方!请提前备份! X:\Users\XXX\AppData\Roaming\Microsoft\SQL Server Management ...
- html5日期转long
正确:日期,时间均是实时的 var inDate = $("#inDate").val().trim(); if(inDate != "") { inDate ...