WEB应用程序中的进度条

WEB 应用程序中的进度条
Julien Cheyssial 写作于2003/10/01
Joise.LI翻译并修改于2004-4-2
 
写在前面:
       原文是我在需要使用进度条时找到的一篇文章,讲解详细并附有实例。我在原文的基础上加上了自己的修改:增加了线程处理并且将进度条的使用放到了子线程中处理。这是我第一次翻译文章,敬请各位指正。原文见于http://www.myblogroll.com/Articles/progressbar/,请对照参考。
 
 
       谁说在WEB应用程序中不能使用进度条?我认为能。本文将介绍在服务端长时间的处理过程中通过使用进度条提高WEB应用程序的质量和界面友好度。事实上,如果一个WEB应用程序一直运行在无状态和无连接状态下,用户很容易认为事情已经结束了。但是本文介绍的不使用任何ActiveX控件和乱七八糟的Java Applets的进度条将有助于改善这点。
 
       在一个WEB应用程序中能够使用进度条的关键是浏览器有能力在所有页面加载完之前显示页面。我们将使用这点特性来有步骤的生成并且发送页面给客户端。首先,我们将使用HTML生成一个完美并且漂亮的进度条,然后我们动态的发送Javascript块以更新进度条。当然,以上的所有内容都是在断开用户请求之前实现的。在C#中,Response.Write允许我们加入自定义内容到缓存区并且Response.Fluse()允许我们把所有缓存区中的内容发送到用户的浏览器上。
 
第一步: 
       第一步让我们来建立一个进度条页面,我们使用 progressbar.aspx 如上所述,我们逐步生成并发送页面到客户端。首先,我们将使用HTML生成一个完美并且漂亮的进度条。所需要的HTML代码我们可以从事先定义的 progressbar.htm 中获取,所以,第一件事情是装载它并且将数据流发送到客户端的浏览器,在 progressbar.aspx Page_Load 中加入如下几行:
            string strFileName = Path.Combine( Server.MapPath("./include"), "progressbar.htm" );
         StreamReader sr = new StreamReader( strFileName, System.Text.Encoding.Default );
         string strHtml = sr.ReadToEnd();
         Response.Write( strHtml );
         sr.Close();
         Response.Flush();
     以下是 progressbar.htm 的HTML代码,(译注:作者把脚本函数放在了另外一个js文件中,但我嫌麻烦就也放在了这个静态页面中了)
< script language ="javascript">
function setPgb(pgbID, pgbValue)
     if ( pgbValue <= 100 )
     {
         if (lblObj = document.getElementById(pgbID+'_label'))
         {
              lblObj.innerHTML = pgbValue + '%'; // change the label value
         }
            
         if ( pgbObj = document.getElementById(pgbID) )
         {
              var divChild = pgbObj.children[0];
              pgbObj.children[0].style.width = pgbValue + "%";
         }
         window.status = "数据读取" + pgbValue + "%,请稍候...";
     }
    
     if ( pgbValue == 100 )
         window.status = "数据读取已经完成";
 
}
</ script >
< html >
     <head>
         <linkrel="stylesheet"type="text/css"href="style/common.css"/>
     </head>
     <bodybgColor="buttonface"topmargin="0"leftmargin="0">
          <tablewidth="100%"height="100%"ID="Table1">
              <tr>
                   <tdalign="center"valign="middle">
                       <DIVclass="bi-loading-status"id="proBar"style="DISPLAY: ; LEFT: 425px; TOP: 278px">
                            <DIVclass="text"id="pgbMain_label"align="left"></DIV>
                            <DIVclass="progress-bar"id="pgbMain"align="left">
                                 <DIVSTYLE="WIDTH:10%"></DIV>
                            </DIV>
                       </DIV>
                   </td>
              </tr>
         </table>
     </body>
</ html >
对应的CSS定义如下:
.bi-loading-status {
 /*position:   absolute;*/
 width:        150px;
 padding: 1px;
 overflow: hidden
}
 
.bi-loading-status .text {
 white-spacenowrap;
 overflow:     hidden;
 width:             100%;
 text-overflow:     ellipsis;
 padding:      1px;
}
 
.bi-loading-status .progress-bar {
 border:       1px solid ThreeDShadow;
 background:   window;
 height:       10px;
 width:        100%;
 padding: 1px;
 overflow: hidden;
 
}
 
.bi-loading-status .progress-bar div {
 background:   Highlight;
 overflow: hidden;
 height:       100%;
 filter:      Alpha(Opacity=0, FinishOpacity=100, Style=1, StartX=0, StartY=0, FinishX=100, FinishY=0);
}
第二步: 
现在我们可以开始更新进度条了,这是十分重要的部分,因为这部分可以令你的进度条活起来。(译注,原来是使用随机的增加15次直到加载完毕,本文仅使用从1-100的匀速增加,以下内容非译)
首先我们新开一个线程,在 Page_Load    中加入以下代码:
         Thread thread = new Thread( new ThreadStart(ThreadProc) );
         thread.Start();
     thread.Join();
在类中增加以下函数:
         private void ThreadProc()
         {
              string strScript = "<script>setPgb('pgbMain','{0}');</script>";
              for ( int i = 0; i <= 100; i++ )
              {
                   System.Threading.Thread.Sleep(10);
                   Response.Write( string.Format( strScript, i ) );
                   Response.Flush();
              }
     }
注意,在以上代码中我们使用 for 循环,在i每增加一次的情况下往客户端发送一段脚本 <script>setPgb('pgbMain','{0}');</script> 其中的 {0} 会被相应的 i 替换,而该段脚本会调用预先写好的javascript函数 setPgb 更改页面的进度条状态。
 
 
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
ckplayer是一款在网页上播放视频的免费的播放器,功能强大,体积小巧,跨平台,使用起来随心所欲。 <p>CKplayer播放器主要以adobe的flash(所使用的版本是CS5)平台开发,所以在支持flash插件的平台和浏览器上都可以使用,而无需下载其它插件,如果你需要修改完整版里提供的相关的flash源文件,请使用adobe的flash cs5以上版本打开源文件修改。</p><p>ckplayer同时也支持html5的视频播放,即同时可以在Ipad,Iphone等IOS平台上播放视频,并且只需简单代码就可以使用,无需了解html5插入视频的方法。</p><p>软件在对各平台的兼容性方面适应性比较强,比如你可以设置在Android平台或wp平台上在用户已安装flash插件的时候使用flash播放器,在没有装flash插件的情况下使用html5播放器。</p><p>ckplayer是一种前台使用的程序,不涉及到服务器程序(asp,php,jsp,.net),也不涉及到对服务器的操作(即不需要写入权限),所以不存在安全方面的问题。同时可以集成在任何程序,包括asp,php,jsp,.net以及其它支持插入flash的环境。</p><p>功能列表:</p><p>兼容SWF/HTML5跨平台播放</p><p>支持流行视频格式flv,f4v,mp4,</p><p>支持html5格式m3u8,webm,ogg theora,mp4</p><p>支持RTMP协议下的视频直播和回放</p><p>支持前置广告(swf,图片,视频)</p><p>支持前置广告多个随机/顺序播放</p><p>支持暂停广告(swf,图片)多个随机播放</p><p>支持缓冲广告,小窗口广告,滚动文字广告</p><p>支持多达6种形式的视频地址调用方式</p><p>支持多段视频无缝播放,支持多集连播</p><p>支持视频预览功能</p><p>自定义提示点功能,跳过片头片尾功能</p><p>bshare完美视频分享功能</p><p>调节视频尺寸,亮度,对比度,色相,饱和度功能</p><p>支持播放结束显示精彩视频推荐</p><p>支持自定义播放器界面,无需了解程序,即可自己制作出风格</p><p>支持js和播放器的互动操作,可以任意控制播放器的动作,比如暂停/播放</p><p>丰富的api接口,快速打造功能强大的插件</p><p> </p><p>CKplayer-超酷网页视频播放器 v6.8 更新日志: </p>一:修复Bug 1:修复了已知的bug 2:修正了html5监听time的错误 3:新加了几个交互函数 4:风格设置里增加了提示文本底色及圆角的功能 二:增加功能 1:增加了全屏模式下启用键盘输入的功能,设置方法分二步:调用代码var flashvars={}里增加fs:'1',以及var params={}里增加allowFullScreenInteractive:true 2:增加了在播放器内显示文本元件的功能。 3:增加了新的调用视频地址的方式:json调用。 感谢各位朋友对ckplayer的支持,在本次升级,许多朋友提供了好的建议,虽然因为考虑到大部分用户的需求后决定一些功能没有对其进行更改。 6.7升级至6.8的方法 1:替换ckplayer.swf 2:替换ckplayer.js的315行((function() {)及以下的所有内容 3:ckplayer.jssetup属性的第21个值在正式使用时设置成0 4:language.xml里增加了控制提示文字的样式:{font color='#FFFFFF' face='Microsoft YaHei' size='16'}[$prompt]{/font} 5:languae.xml里增加了新版默认风格里的设置的提示文本样式:{font color='#FFFFFF' face='Microsoft YaHei,\u5fae\u8f6f\u96c5\u9ed1' size='14'}设置{/font} (也可以直接替换掉languae.xml) 6:如果要使用新的风格,需要替换掉目前的style.swf,并同时删除ckplayer.js和ckplayer.xml安装的插件代码。详细的可以对照新的ckplayer.js的: function ckcpt() {   var cpt = '';   return cpt; } 以及ckplayer.xml的的节点

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值