JQuery - 實作 Busy Indicator

一般在 Web 中當 Client 在跟 Server 擷取資料時，一般都需 Hold 畫面上的部份不讓 Client 端做任何的動作及告知目前動作正在處理中，故最常使用的是在原上的畫面在再利用圖層的觀念再上層再疊上一個 Busy 的畫面，再此提供一個使用 JQuery 最簡單的方式來實作這個功能.

1. 在 CSS 中設定下面的屬性

<style type="text/css">

    html, body
    {
        overflow: auto;
    }
    body
        {
            padding: 0;
            margin: 0;
        }
        
    #mask    
    {
        position:absolute;   
        z-index:9000;   
        background-color:#000; 
        display:none; 
    } 
        
    #window {
        position:absolute;
        left:0;
        top:0;
        background-color: #FFF;
        width:230px;
        height:90px;
        display:none;
        z-index:9999;
        padding:20px;
    }
        
</style>

2. 在 HTML 中加入下面程式碼

<div id="mask"></div>
<div id="window">
    <table border="0">
        <tr>
            <td align="center"><span style="color : Red; font-weight : bold" >Data processing, please waiting...</span></td>
        </tr>
        <tr>
            <td style="text-align:center"><img src="/WBEDAFAB6/images/ProgressBar.gif" border="0" /></td>
        </tr>
    </table>
</div>

3. 在 JavaScript 中加入下面的程式碼

function showmask() {
        var maskHeight = $(document).height() - 5;
        var maskWidth = $(document).width() - 5;
        $('#mask').css({ 'width': maskWidth, 'height': maskHeight });
        $('#mask').fadeIn(1000);
        $('#mask').fadeTo("slow", 0.8);

        var winH = $(window).height();
        var winW = $(window).width();

        $("#window").css('top', winH / 2 - $("#window").height() / 2);
        $("#window").css('left', winW / 2 - $("#window").width() / 2);

        $("#window").fadeIn(2000);
        
    }

故就完成最簡單的 Busy Indicator 的畫面了，那結果如下所示：