當查詢內容太多或存入資料太久,等待所需時間將會太久,應用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 轉圈。