Asp.net 應用Jquery 的載入畫面loading 轉圈圈呈現

2017-07-11

4705
0
asp.net

當查詢內容太多或存入資料太久，等待所需時間將會太久，應用loading遮罩避免重複點取，也讓使用者知道頁面正在載入。

前製作業，安裝Jquery ,再寫 LoadingMask.js ，下載loading所需用的圖示

// 顯示遮罩畫面
function LoadingStart(ControlToDeny) {
    //先判斷丟進來的物件是否為undefined
    if (typeof (ControlToDeny.attr('id')) != 'undefined') {
        //新增一個底圖div
        ControlToDeny.append("<div id='divMaskFrame" + ControlToDeny.attr('id') + "' class='MaskFrame' style='background-color: #F2F4F7; left: 0px; position: absolute; top: 0px;'></div>");
        $("#divMaskFrame" + ControlToDeny.attr('id')).css({ "z-index": 999998, "opacity": 0.7, "width": ControlToDeny.width(), "height": ControlToDeny.height(), "top": ControlToDeny.position().top, "left": ControlToDeny.position().left });
        $("#divMaskFrame" + ControlToDeny.attr('id')).show()

        //再新增一個放gif圖的div
        $("#divMaskFrame" + ControlToDeny.attr('id')).append("<div id='maskPic" + ControlToDeny.attr('id') + "' style='font-size:120%;font-weight:bold;'><img src='../Images/loading.gif' /><br/>資料存入中...</div>");
        $("#maskPic" + ControlToDeny.attr('id')).css({ "z-index": 999999, "top": ControlToDeny.height() / 2 - 15, "left": ControlToDeny.width() / 2 - 15, "position": "absolute" });
    }
}

前端戴入剛剛載的jquery 及寫的js檔

   <script type="text/javascript" src="../Script/jquery-1.4.3.min.js" charset="UTF-8"></script>  
    <script type="text/javascript" src="../Script/LoadingMask.js"></script>
   
   <script type="text/javascript">
       function LoadingStartForGridview() {
           if (confirm('請確認是否送出資料？'))
               LoadingStart($("#tblLoading"));
           else
               return false;
        }
    </script>

後端在要執行loading的按鈕上加入即可

btnConfirm.Attributes["onclick"] = "return LoadingStartForGridview();";

這樣就可以實現載入畫面loading 轉圈。

回首頁