applied Progressbar -- Koma
css:


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 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
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
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

浙公网安备 33010602011771号