BlockUI 是一個相當不錯的jQuery插件，它可以輕易設定頁面指定區域顯示執行中文字(如 Loading...)並鎖定該區域限制輸入。簡單的說，若我們希望網頁在執行PostBack 或 Ajax 更新的過程中，希望能限制輸入或重覆按鈕並顯示處理中訊息的話，那 BlockUI 是相當不錯的選擇，接下來我們就來示範如何在 ASP.NET 中使用 BlockUI。
BlockUI 是 jQuery 的插入，所以要下載 jQuery 及 BlockUI 插入的 js 檔 (jquery.js 及 jquery.blockUI.js)，相關檔案可由下列連結下載
jquery.js：http://jquery.com/
jquery.blockUI.js：http://malsup.com/jquery/block/ (該網站有 BlockUI 使用的詳細說明)
在 VS2005 新增一個 ASP.NET AJAX 網站專案，將 jquery.js 及 jquery.blockUI.js 檔案複製至網站 js 資料夾，並在頁面中的 head 區塊加入引用
1: <head runat="server">
2: <title>jQuery BlockUI Plugin</title>
3: <script src="js/jquery.js" type="text/javascript"></script>
4: <script src="js/jquery.blockUI.js" type="text/javascript"></script>
5: </head>
在頁面中加入 UpdatePanel 控制項，並在 UpdatePanel 中置入一個 Button，aspx 程式碼如下
1: <form id="form1" runat="server">
2: <asp:ScriptManager ID="ScriptManager1" runat="server" />
3: <div>
4: <asp:UpdatePanel ID="UpdatePanel1" runat="server">
5: <ContentTemplate>
6: <asp:Button ID="Button1" runat="server" OnClick="Button1_Click" Text="Button" />
7: </ContentTemplate>
8: </asp:UpdatePanel>
9: </div>
10: </form>
在 Button 的 Click 事件中撰寫等待 3 秒的程式碼，這是為了呈現 BlockUI 的效果。
1: Protected Sub Button1_Click(ByVal sender As System.Object, ByVal e As System.EventArgs)
2: Dim N1 As Integer
3: For N1 = 1 To 3
4: System.Threading.Thread.Sleep(1000)
5: Next
6: End Sub
使用 BlockUI 插件相當容易，只要頁面 submit 時呼叫 $.blockUI() 就會顯示 BlockUI，而頁面載入時呼叫 $.unblockUI() 隱藏 BlockUI。
所以在頁面 Page Load 事件中撰寫如下程式碼。
1: Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
2: Dim sScript As String
3:
4: '頁面執行 Submit 時顯示 blockUI
5: sScript = "$.blockUI();"
6: ScriptManager.RegisterOnSubmitStatement(Me, Me.GetType(), "blockUI", sScript)
7:
8: '頁面載入時隱藏 blockUI
9: sScript = "$.unblockUI();"
10: ScriptManager.RegisterStartupScript(Me, Me.GetType(), "unblockUI", sScript, True)
11: End Sub
執行結果如下，因為 $.blockUI() 未指定區域，所以會將整個頁面 Lock 並顯示 "Please wait..." 的訊息。當執行結束時，就會呼叫 $.unblockUI() 來隱藏 BlockUI。
若我們希望將顯示的文字改為「資料載入中...」並加入等待圖示的話，可以在 $.blockUI() 傳入 message 參數，程式碼修改如下
1: '頁面執行 Submit 時顯示 blockUI
2: sScript = "$.blockUI({" & _ 3: "message: '<h3></br><img src=""busy.gif"" /> 資料載入中...</h3>'" & _
4: "});"
5: ScriptManager.RegisterOnSubmitStatement(Me, Me.GetType(), "blockUI", sScript)
執行結果如下
2008/4/19 11:03|
閱讀數 : 6325
|
2 人收藏
1 人推薦
我要推薦
|
|
文章分類:
jQuery
訂閱