applied Progressbar -- Koma
css:
1.bi-loading-status 
{
2
/**//*position: absolute;*/
3
width: 150px;
4padding: 1px;
5overflow: hidden;
6
}
7.bi-loading-status .text {
8white-space: nowrap;
9overflow: hidden;
10width: 100%;
11text-overflow: ellipsis;
12padding: 1px;
13}
14.bi-loading-status .progress-bar {
15border: 1px solid ThreeDShadow;
16background: window;
17height: 10px;
18width: 100%;
19padding: 1px;
20overflow: hidden;
21}
22.bi-loading-status .progress-bar div {
23background: Highlight;
24overflow: hidden;
25height: 100%;
26filter: Alpha(Opacity=0, FinishOpacity=100, Style=1, StartX=0, StartY=0, FinishX=100, FinishY=0);
27}
aspx:
1
<%@ Page language="c#" Codebehind="WebForm1.aspx.cs" AutoEventWireup="false" Inherits="progressbar.WebForm1" %>
2<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" >
3<HTML>
4 <HEAD>
5 <title>WebForm1</title>
6 <meta name="GENERATOR" Content="Microsoft Visual Studio .NET 7.1">
7 <meta name="CODE_LANGUAGE" Content="C#">
8 <meta name="vs_defaultClientScript" content="JavaScript">
9 <meta name="vs_targetSchema" content="http://schemas.microsoft.com/intellisense/ie5">
10 </HEAD>
11 <body MS_POSITIONING="GridLayout">
12 <form id="Form1" method="post" runat="server">
13 <%=fixedHeader()%>
14 </form>
15 </body>
16</HTML>
17
cs:
1using System;
2using System.Collections;
3using System.ComponentModel;
4using System.Data;
5using System.Drawing;
6using System.Web;
7using System.Web.SessionState;
8using System.Web.UI;
9using System.Web.UI.WebControls;
10using System.Web.UI.HtmlControls;
11using System.Threading;
12using System.IO;
13using System.Text;
14
15namespace progressbar
16{
17 /// <summary>
18 /// WebForm1 的摘要说明。
19 /// </summary>
20 public class WebForm1 : System.Web.UI.Page
21 {
22 private void Page_Load(object sender, System.EventArgs e)
23 {
24 string strFileName =Server.MapPath("progressbar.htm" );
25 StreamReader sr = new StreamReader( strFileName, System.Text.Encoding.Default );
26 string strHtml = sr.ReadToEnd();
27 Response.Write( strHtml );
28 sr.Close();
29 Response.Flush();
30 Thread thread = new Thread(new ThreadStart(ThreadProc)); //调用ThreadPro进程
31
32 thread.Start();
33// LoadData();//load数据
34 thread.Join();
35
}
36
37 #region fixedHeader
38 protected string fixedHeader()
39 {
40 StringBuilder s=new StringBuilder();
41 s.Append(@"<table width='100%' border='1' cellspacing='0' style='MARGIN-TOP:-2px'>");
42 s.Append(@"<TR class='fixedHeaderTr' style='BACKGROUND:navy;COLOR:white'>");
43 s.Append(@"<TD nowrap>Header A</TD>");
44 s.Append(@"<TD nowrap>Header B</TD>");
45 s.Append(@"<TD nowrap>Header C</TD>");
46 s.Append(@"</TR>");
47 for(int m=0;m<100;m++)
48 {
49 s.Append(@"<TR>");
50 s.Append(@"<TD>A").Append(m).Append("</TD>");
51 s.Append(@"<TD>B").Append(m).Append("</TD>");
52 s.Append(@"<TD>C").Append(m).Append("</TD>");
53 s.Append(@"</TR>");
54 }
55 s.Append(@"</table>");
56 return s.ToString();
57 }
58 #endregion
59
60 #region ThreadProc
61 private void ThreadProc()
62 {
63 string strScript = "<script>setPgb('pgbMain','{0}');</script>";
64 for ( int i = 0; i <= 100; i++ )
65 {
66 System.Threading.Thread.Sleep(50); //debug
67 Response.Write( string.Format( strScript, i));
68 Response.Flush();
69 }
70 }
71 #endregion
72
73// #region LoadData
74// private void LoadData()
75// {
76// for(int m=0;m<90000;m++)
77// {
78// for(int i=0;i<90000;i++)
79// {
80//
81// }
82// }
83// }
84// #endregion
85
86 #region Web 窗体设计器生成的代码
87 override protected void OnInit(EventArgs e)
88 {
89 //
90 // CODEGEN: 该调用是 ASP.NET Web 窗体设计器所必需的。
91 //
92 InitializeComponent();
93 base.OnInit(e);
94 }
95
96 /// <summary>
97 /// 设计器支持所需的方法 - 不要使用代码编辑器修改
98 /// 此方法的内容。
99 /// </summary>
100 private void InitializeComponent()
101 {
102 this.Load += new System.EventHandler(this.Page_Load);
103 }
104 #endregion
105 }
106}
107
progressbar.html
1<HTML>
2 <HEAD>
3 <script language="javascript">
4
5function setPgb(pgbID, pgbValue)
6{
7 if ( pgbValue <= 100 )
8 {
9
10 if (lblObj = document.getElementById(pgbID+'_label'))
11 {
12 lblObj.innerHTML = pgbValue + '%'; // 改变value的值;
13 }
14 if ( pgbObj = document.getElementById(pgbID) )
15 {
16 var divChild = pgbObj.children[0];
17 pgbObj.children[0].style.width = pgbValue + "%";
18 }
19 window.status = "数据读取" + pgbValue + "%，请稍候";
20 }
21 if ( pgbValue == 100 )
22 {
23 window.status = "数据读取已经完成";
24 proBar.style.display="none";
25 Table1.style.display="none";
26 }
27}
28
29 </script>
30 <link rel="stylesheet" type="text/css" href="common.css"></HEAD>
31 <body topmargin="0" leftmargin="0">
32 <table width="100%" height="100%" ID="Table1" runat="server">
33 <tr>
34 <td align="center" valign="middle">
35 <DIV class="bi-loading-status" id="proBar" style="LEFT: 425px; TOP: 278px"><FONT face="宋体"></FONT>
36 <DIV class="text" id="pgbMain_label" align="left"></DIV>
37 <DIV class="progress-bar" id="pgbMain" align="left">
38 <DIV STYLE="WIDTH:10%"></DIV>
39 </DIV>
40 </DIV>
41 </td>
42 </tr>
43 </table>
44 </body>
45</HTML>
46
1
.bi-loading-status { 2
/**//*position: absolute;*/ 3
width: 150px; 4
padding: 1px; 5
overflow: hidden; 6
} 7
.bi-loading-status .text { 8
white-space: nowrap; 9
overflow: hidden; 10
width: 100%; 11
text-overflow: ellipsis; 12
padding: 1px; 13
} 14
.bi-loading-status .progress-bar { 15
border: 1px solid ThreeDShadow; 16
background: window; 17
height: 10px; 18
width: 100%; 19
padding: 1px; 20
overflow: hidden; 21
} 22
.bi-loading-status .progress-bar div { 23
background: Highlight; 24
overflow: hidden; 25
height: 100%; 26
filter: Alpha(Opacity=0, FinishOpacity=100, Style=1, StartX=0, StartY=0, FinishX=100, FinishY=0); 27
} aspx:
1
<%@ Page language="c#" Codebehind="WebForm1.aspx.cs" AutoEventWireup="false" Inherits="progressbar.WebForm1" %>2
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" >3
<HTML>4
<HEAD>5
<title>WebForm1</title>6
<meta name="GENERATOR" Content="Microsoft Visual Studio .NET 7.1">7
<meta name="CODE_LANGUAGE" Content="C#">8
<meta name="vs_defaultClientScript" content="JavaScript">9
<meta name="vs_targetSchema" content="http://schemas.microsoft.com/intellisense/ie5">10
</HEAD>11
<body MS_POSITIONING="GridLayout">12
<form id="Form1" method="post" runat="server">13
<%=fixedHeader()%>14
</form>15
</body>16
</HTML>17
cs:
1
using System;2
using System.Collections;3
using System.ComponentModel;4
using System.Data;5
using System.Drawing;6
using System.Web;7
using System.Web.SessionState;8
using System.Web.UI;9
using System.Web.UI.WebControls;10
using System.Web.UI.HtmlControls;11
using System.Threading;12
using System.IO;13
using System.Text;14
15
namespace progressbar16
{17
/// <summary>18
/// WebForm1 的摘要说明。19
/// </summary>20
public class WebForm1 : System.Web.UI.Page21
{22
private void Page_Load(object sender, System.EventArgs e)23
{24
string strFileName =Server.MapPath("progressbar.htm" ); 25
StreamReader sr = new StreamReader( strFileName, System.Text.Encoding.Default ); 26
string strHtml = sr.ReadToEnd(); 27
Response.Write( strHtml ); 28
sr.Close(); 29
Response.Flush(); 30
Thread thread = new Thread(new ThreadStart(ThreadProc)); //调用ThreadPro进程31
32
thread.Start(); 33
// LoadData();//load数据 34
thread.Join();35
}36
37
#region fixedHeader38
protected string fixedHeader()39
{ 40
StringBuilder s=new StringBuilder();41
s.Append(@"<table width='100%' border='1' cellspacing='0' style='MARGIN-TOP:-2px'>");42
s.Append(@"<TR class='fixedHeaderTr' style='BACKGROUND:navy;COLOR:white'>");43
s.Append(@"<TD nowrap>Header A</TD>");44
s.Append(@"<TD nowrap>Header B</TD>");45
s.Append(@"<TD nowrap>Header C</TD>");46
s.Append(@"</TR>");47
for(int m=0;m<100;m++)48
{49
s.Append(@"<TR>");50
s.Append(@"<TD>A").Append(m).Append("</TD>");51
s.Append(@"<TD>B").Append(m).Append("</TD>");52
s.Append(@"<TD>C").Append(m).Append("</TD>");53
s.Append(@"</TR>");54
} 55
s.Append(@"</table>"); 56
return s.ToString(); 57
}58
#endregion59
60
#region ThreadProc61
private void ThreadProc() 62
{ 63
string strScript = "<script>setPgb('pgbMain','{0}');</script>"; 64
for ( int i = 0; i <= 100; i++ ) 65
{ 66
System.Threading.Thread.Sleep(50); //debug67
Response.Write( string.Format( strScript, i)); 68
Response.Flush(); 69
} 70
}71
#endregion72
73
// #region LoadData74
// private void LoadData()75
// {76
// for(int m=0;m<90000;m++)77
// {78
// for(int i=0;i<90000;i++)79
// {80
// 81
// } 82
// } 83
// }84
// #endregion85
86
#region Web 窗体设计器生成的代码87
override protected void OnInit(EventArgs e)88
{89
//90
// CODEGEN: 该调用是 ASP.NET Web 窗体设计器所必需的。91
//92
InitializeComponent();93
base.OnInit(e);94
}95
96
/// <summary>97
/// 设计器支持所需的方法 - 不要使用代码编辑器修改98
/// 此方法的内容。99
/// </summary>100
private void InitializeComponent()101
{ 102
this.Load += new System.EventHandler(this.Page_Load);103
}104
#endregion105
}106
}107
progressbar.html
1
<HTML>2
<HEAD>3
<script language="javascript"> 4
5
function setPgb(pgbID, pgbValue) 6
{ 7
if ( pgbValue <= 100 ) 8
{ 9
10
if (lblObj = document.getElementById(pgbID+'_label')) 11
{ 12
lblObj.innerHTML = pgbValue + '%'; // 改变value的值;13
} 14
if ( pgbObj = document.getElementById(pgbID) ) 15
{ 16
var divChild = pgbObj.children[0]; 17
pgbObj.children[0].style.width = pgbValue + "%"; 18
} 19
window.status = "数据读取" + pgbValue + "%，请稍候"; 20
} 21
if ( pgbValue == 100 ) 22
{23
window.status = "数据读取已经完成"; 24
proBar.style.display="none";25
Table1.style.display="none";26
}27
} 28
29
</script>30
<link rel="stylesheet" type="text/css" href="common.css"></HEAD>31
<body topmargin="0" leftmargin="0">32
<table width="100%" height="100%" ID="Table1" runat="server">33
<tr>34
<td align="center" valign="middle">35
<DIV class="bi-loading-status" id="proBar" style="LEFT: 425px; TOP: 278px"><FONT face="宋体"></FONT>36
<DIV class="text" id="pgbMain_label" align="left"></DIV>37
<DIV class="progress-bar" id="pgbMain" align="left">38
<DIV STYLE="WIDTH:10%"></DIV>39
</DIV>40
</DIV>41
</td>42
</tr>43
</table>44
</body>45
</HTML>46
