201403071423使用 jQuery 的blockUI 顯示 讀取中

以下是用.Net C#程式來作說明

下載處:

jQuery:http://jquery.com/download/

blockUI:http://jquery.malsup.com/block/#download

讀取中的動態圖片:http://ajaxload.info/

 

首先當然要先將所需的jQuery library寫入頁面中(寫在HTML何處應該不需多說吧)

<script src="script/jquery-1.11.0.min.js"></script>

<script src="script/jquery.blockUI.js"></script>

緊接這下面再加上下列這段script

<script type="text/javascript">
function showBlockUI(){
$.blockUI({
message: '<table><tr><td valign="middle" style="height:50px" class="main"><img src="images/ajax-loader.gif" /> 處理中,請稍候...</td></tr></table>',
css: {
width: '250px',
height: '50px'
}
});
}
</script>

這段script就是讀取中的畫面設計,這可依據頁面需求自行修改

再來就是將用來呼叫後端執行程式的控制項也加上呼叫showBlockUI這個函示

<asp:Button ID="btnSearch" runat="server" CssClass="main"
onclick="btnSearch_Click" Text="Search" OnClientClick="showBlockUI();" />

經過這樣的修改就已經可以執行了

其執行結果如下圖


 

如果你的頁面設計是採用整頁Postback的方式

那到這邊就算是大功告成了

資料顯示出來,blockUI也會跟著消失

但如果是採用非同步的設計那就要在後段程式加入unblockUI的script

否則就算資料跑出來的,上圖的處理中還是會一直繼續跑不停

結果就被卡死什麼事也不能做了...

 

後端在程式執行結束後加入

ScriptManager.RegisterStartupScript(Page,Page.GetType(), "unblockUI", "$.unblockUI();", true);

就可以完工囉!

 

回應
關鍵字
    沒有新回應!





Powered by Xuite