Control.ProgressBar 基于百分比的进度条。
Control.ProgressBar是一个采用Prototype开发,基于百分比的进度条。
我试了一下还是挺好用的.
源码如下:
<!DOCTYPE html><head><meta http-equiv="Content-Type" content="text/html;charset=utf-8" /> <title>Control.ProgressBar : CSS based progress bar widget for Prototype</title><link href="/all.css" media="screen" rel="stylesheet" type="text/css" /><script src="all.js" type="text/javascript"></script><style>#progress_bar {width:102px;height:7px;border:1px solid #ccc;padding:0;margin:0;position:relative;background-image:url(progress_bar.gif);background-repeat:repeat-x;}#progress_bar div {background-color:#fff;}</style><script>document.observe('dom:loaded',function(){var progress_bar = new Control.ProgressBar('progress_bar',{ interval: 0.15});$('progress_bar_stop').observe('click',progress_bar.stop.bind(progress_bar));$('progress_bar_start').observe('click',progress_bar.start.bind(progress_bar));$('progress_bar_reset').observe('click',progress_bar.reset.bind(progress_bar));$('progress_bar_step_5').observe('click',progress_bar.step.bind(progress_bar,5));$('progress_bar_step_25').observe('click',progress_bar.step.bind(progress_bar,25));}); </script></head><body value="Start" id="progress_bar_start"/> <input type="button" value="Stop" id="progress_bar_stop"/> <input type="button" value="Reset" id="progress_bar_reset"/> <input type="button" value="+ 5%" id="progress_bar_step_5"/> <input type="button" value="+ 25%" id="progress_bar_step_25"/> </div> </body></html>