对于进度条，在HTML5下有个新标签就是用来呈现任务的进度，鉴于目前很多旧式浏览器还不完全支持HTML5，大家都喜欢用javascript和css实现进度条的功能。上周我在做OA里面的任务管理时，通过比较jQuery UI自带的[URL=http://jqueryui.com/progressbar]progress bar[/URL]还有jQuery easyui中的[URL=http://www.jeasyui.com/documentation/progressbar.php]progress bar[/URL]，发现都不太符合我的需求，最后找到一个特别简单的实现，只需几行代码即可，读懂英文的看这里[URL=http://workshop.rs/2012/12/animated-progress-bar-in-4-lines-of-jquery/]ANIMATED PROGRESS BAR IN 4 LINES OF JQUERY[/URL]，也可以看GitHub上的网址：[URL=https://github.com/kopipejst/progressbar]https://github.com/kopipejst/progressbar[/URL]
这里分享一下，我的样式表
<br/>#rateOfProgressBar {<br/> width: 400px;<br/> height: 22px;<br/> border: 1px solid #ccc;<br/> background-color: #f5f5f5;<br/> }<br/><br/> #rateOfProgressBar div {<br/> height: 100%;<br/> color: #fff;<br/> text-align: right;<br/> line-height: 22px; /* same as #progressBar height if we want text middle aligned */<br/> width: 0;<br/> background-color: #00cc33;/*#ff0000*/<br/> }<br/>
C#页面调用的代码如下，我不喜欢把javascript的调用放在body中，于是放在jQuery的ready事件中，另外我这里的lblRateOfProgress在页面前端做一个display:none的隐藏。
<br/><script type="text/javascript"><br/> $(document).ready(function () {<br/><br/> progress($("#lblRateOfProgress").text()*100, $('#rateOfProgressBar'));<br/> });<br/>function progress(percent, $element) {<br/><br/> var progressBarWidth = percent * $element.width() / 100;<br/><br/> $element.find('div').animate({ width: progressBarWidth }, 500).html(percent + "% ");<br/><br/>}<br/> </script><br/>
