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样式文件:
在你的htm文件中添加div和button:
然后就是使用javascript来给div何button添加效果了:
//run this bar like a timer
var 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); });});
效果: