一個簡單的ASP.NET的進度條控制項

一個簡單的ASP.NET進度條控制項：

（1）建立 一個ID="Button1"的BUTTON控制項 和 一個ID="LAY1"的DIV控制項

<asp:Button ID="Button1" runat="server" Text="Button" /><br />
        <DIV id="Lay1" style="Z-INDEX: 1; LEFT: 1%; VISIBILITY: hidden; WIDTH: 99%; CURSOR: crosshair; POSITION: absolute; TOP: 32px; HEIGHT: 95%; BACKGROUND-COLOR: #ffffff">
        <FONT face="宋體"></FONT><FONT face="宋體"></FONT><FONT face="宋體"></FONT><FONT face="宋體"></FONT><br>
        <b><font color="#800080" size="2">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;正在檢索資料，請稍候...</font></b>
        <table align="center" style="width: 78px; height: 25px">
             <tr>
                 <td style="width: 56px; height: 27px;">
                     <div style="BORDER-RIGHT: black 1px solid; PADDING-RIGHT: 2px; BORDER-TOP: black 1px solid; PADDING-LEFT: 2px; FONT-SIZE: 8pt; PADDING-BOTTOM: 2px; BORDER-LEFT: black 1px solid; PADDING-TOP: 2px; BORDER-BOTTOM: black 1px solid; width: 88px;" id="DIV1" language="javascript" onclick="return DIV1_onclick()">
                            <span id="progress1">&nbsp;</span>
                            <span id="progress2">&nbsp;</span>
                            <span id="progress3">&nbsp;</span>
                            <span id="progress4">&nbsp;</span>
                            <span id="progress5">&nbsp;</span>
                            <span id="progress6">&nbsp;</span>
                            <span id="progress7">&nbsp;</span>
                            <span id="progress8">&nbsp;</span>
                            <span id="progress9">&nbsp;</span>
                            <span id="progress10">&nbsp;</span>
                            <span id="progress11">&nbsp;</span>
                            <span id="progress12">&nbsp;</span>
                            <span id="progress13">&nbsp;</span>
                            <span id="progress14">&nbsp;</span>
                            <span id="progress15">&nbsp;</span>
                      </div>
                  </td>
              </tr>
          </table>
      </Div>

 

（2）寫javascript指令碼

<script language="javascript" type='text/javascript'>

    var progressEnd = 15;  // set to number of progress <span>'s.
    var progressColor = 'green'; // set to progress bar color
    var progressInterval = 300; // set to time between updates (milli-seconds)
    var progressAt = progressEnd;
    var progressTimer;
//Button1的onClick事件 觸發 progress_update()
function progress_update()
{
     progressAt++;
     if (progressAt > progressEnd)
     {
        progress_clear();
        progressAt=1;
     }
     document.getElementById('progress'+progressAt).style.backgroundColor = progressColor;
     progressTimer = setTimeout('progress_update()',progressInterval);
}
//Button1的onClick事件即將完成 觸發 progress_stop()
function progress_stop()
{
     clearTimeout(progressTimer);
     progress_clear();
}
function progress_clear()
{
    for (var i = 1; i <= progressEnd; i++) document.getElementById('progress'+i).style.backgroundColor = 'transparent';
    progressAt = 0;
}
</script>

 

（3）編寫後台代碼

'頁面初始化時 為按鈕綁定狀態與事件
    Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
        If Not Me.IsPostBack Then
            Button1.Attributes.Add("onClick", "Lay1.style.visibility='';progress_update();")
        End If
    End Sub

 '設定按鈕的屬性
    Protected Sub Button1_Click(ByVal sender As Object, ByVal e As System.EventArgs) Handles Button1.Click
        MsgBox("here it is")
        Me.scriptjdt(Me, "Lay1.style.visibility='hidder';progress_stop();")
    End Sub

 '通過 Me.ClientScript.RegisterStartupScript 註冊javascript指令碼
    Public Sub scriptjdt(ByVal objPage As System.Web.UI.Page, ByVal strValue As String)
        Dim jb As String
        jb = "<script language='javascript' type='text/javascript'>" + strValue + "</script>"
        objPage.ClientScript.RegisterStartupScript(Me.GetType(), "jdt_ok", jb)

        ‘objPage.RegisterStartupScript("jdt_ok", jb)
    End Sub