2016年8月24日 星期三

透過 BlockUI 產生遮罩效果


當預期後端 Server 的處理時間會很久時,總是希望讓使用者知道系統還活著,只是正在處理中。這時,就會希望有個「遮罩」效果,讓背景呈現灰階、甚至放一個動態 .gif 圖檔來表示。

網路上蠻多推薦 BlockUI 的文章,自己實際去練習,發現還蠻容易上手的。

首先,必須先把會用到的 .js 抓回來。 (  jQueryBlockUI )
然後在網頁上引用他們。


    <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">處理中! &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<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 顯示 讀取中

沒有留言:

張貼留言