码迷,mamicode.com
首页 > Web开发 > 详细

[ASP.NET] 使用Loading遮罩防止使用者重複點擊

时间:2015-06-09 11:44:43      阅读:122      评论:0      收藏:0      [点我收藏+]

标签:

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>
View Code

 

最後在加上控制顯示或隱藏的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": 999999, "top": (h / 2) - (progress.height() / 2), "left": (w / 2) - (progress.width() / 2) });
    progress.show();
}
// 顯示遮罩畫面
function displayMaskFrame() {
    var w = $(window).width();
    var h = $(document).height();
    var maskFrame = $("#divMaskFrame");
    maskFrame.css({ "z-index": 999998, "opacity": 0.7, "width": w, "height": h });
    maskFrame.show();
}
View Code

 

之後我們只要在要使用的按鈕上加入 onClientClick 事件觸發 ShowProgressBar(); 即可,如下:

技术分享
<asp:Button ID="Button1" runat="server" onclick="Button1_Click" Text="送出" OnClientClick="ShowProgressBar();" />
View Code

 

 

結果如下:

技术分享

如此就以簡單的方法防止,並且也不會讓使用者不知所措,使用觀感也會好一點嘍。

[ASP.NET] 使用Loading遮罩防止使用者重複點擊

标签:

原文地址:http://www.cnblogs.com/wangjiahong/p/4562674.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!