當預期後端 Server 的處理時間會很久時，總是希望讓使用者知道系統還活著，只是正在處理中。這時，就會希望有個「遮罩」效果，讓背景呈現灰階、甚至放一個動態 .gif 圖檔來表示。
網路上蠻多推薦 BlockUI 的文章，自己實際去練習，發現還蠻容易上手的。
首先，必須先把會用到的 .js 抓回來。 ( jQuery, BlockUI )
然後在網頁上引用他們。
<script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>
<script src="Scripts/jquery.blockUI.js" type="text/javascript"></script>
而使用 BlockUI 的方法則是：
$.blockUI({ message: '<div>處理中! </div>' });
不過，為了讓等待時不枯燥無聊，所以另外放了一個會動的 .gif 圖檔。可以到 ajaxload 去客製化自己喜歡的動態圖檔再下載使用。
完整程式如下：
Test.aspx
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>
<script src="Scripts/jquery.blockUI.js" type="text/javascript"></script>
<style>
.divAlert
{
color:Red;
font-size:18px;
line-height:25px;
vertical-align:middle;
}
</style>
<script>
$(function () {
$("input[id$=btn01]").click(function () {
$.blockUI({ message: '<div class="divAlert">處理中! <img width="20px" src="./images/loader-red.gif"></img></div>' });
});
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:Button ID="btn01" runat="server" Text="點選" onclick="btn01_Click" />
</div>
</form>
</body>
</html>
Test.aspx.cs
using System.Threading;
protected void btn01_Click(object sender, EventArgs e)
{
//讓程式跑久一點... 5 秒
Thread.Sleep(5000);
}
參考：
01：ajaxload
02：BlockUI Plugin - 功能完善的頁面、訊息遮罩
03：使用 jQuery 的blockUI 顯示 讀取中
沒有留言:
張貼留言