JQuery的Progress Bar的高级介绍

jQuery ui的几个插件中Progress Bar给出的例子我觉得最没有建设性了。我觉得应该给出来比较好的让进度条不断变化的例子。

那这里我就先提供几个例子,看时间而定了。如果有时间我会多写几个pogress bar的例子给大家。

1. JQuery的progress bar动起来:

     首先你需要去jQuery的官网下载jquery.js和

http://digitalbush.com/wp-content/uploads/2007/02/jqueryprogressbar.js.

     然后在你的html文档中添加如下css样式文件：

/* progress bar container */#progressbar{ border:1px solid black; width:200px; height:20px; position:relative; color:black; }/* color bar */#progressbar div.progress{ position:absolute; width:0; height:100%; overflow:hidden; background-color:#369;}/* text on bar */#progressbar div.progress .text{ position:absolute; text-align:center; color:white;}/* text off bar */#progressbar div.text{ position:absolute; width:100%; height:100%; text-align:center;}

    在你的htm文件中添加div和button:

<h2>Demo</h2><div id="progressbar"></div><input type='button' id='run' value='start'/><input type='button' id='reset' value='reset'/></div>

    然后就是使用javascript来给div何button添加效果了:

$("#progressbar").reportprogress(0);//run this bar like a timervar pct=0;var handle=0;function update(){ $("#progressbar").reportprogress(++pct); if(pct==100){ clearInterval(handle); $("#run").val("start"); pct=0; }}jQuery(function($){ $("#run").click(function(){ if(this.value=="start"){ handle=setInterval("update()",100); this.value="stop"; }else{ clearInterval(handle); this.value="start"; } }); $("#reset").click(function(){ pct=0; $("#progressbar").reportprogress(0); });});

 

 效果: