兩隻小虎,一隻豬

通常我們會希望當使用者按下網頁上的Button 時,在Server 還沒回傳結果前
能將整個畫面凍結,避免使用者再按下頁面上任何控制項,
jQuery Block UI可以輕鬆的達到這項功能

1. 先在Html頁面中加入jQuery Block UI

<script language="javascript" type="text/javascript">
  function showBlockUI() 
  {
    $.blockUI 
    (
      { 
        message: '<p>處理中,請稍後....!</p>' ,
        css: 
        {  
          border: 'none',  
          padding: '15px',    
          backgroundColor: '#000',  
          '-webkit-border-radius': '10px',  
          '-moz-border-radius': '10px', 
          opacity: .5,  
          color: '#fff'  
        } 
      }
    );
  }    
</script>

2. Button 的 onClientClient事件中加入Block UI, 來凍結視窗

Protected Sub Page_LoadComplete(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.LoadComplete
   Me.Button1.OnClientClick = "showBlockUI();"    
End Sub

3.Button 的Click事件中加入UnBlock UI, 來解除凍結視窗

Protected Sub Button1_Click(ByVal sender As Object, ByVal e As System.EventArgs)
   System.Threading.Thread.Sleep(5000)   
   Dim sScript As String = "$.unblockUI();"
   ScriptManager.RegisterStartupScript(Me, Me.GetType(), "unblock_UI", sScript, True)
End Sub