一个简单的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"> 正在检索数据,请稍候...</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" οnclick="return DIV1_onclick()">
<span id="progress1"> </span>
<span id="progress2"> </span>
<span id="progress3"> </span>
<span id="progress4"> </span>
<span id="progress5"> </span>
<span id="progress6"> </span>
<span id="progress7"> </span>
<span id="progress8"> </span>
<span id="progress9"> </span>
<span id="progress10"> </span>
<span id="progress11"> </span>
<span id="progress12"> </span>
<span id="progress13"> </span>
<span id="progress14"> </span>
<span id="progress15"> </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