首页 诗词 字典 板报 句子 名言 友答 励志 学校 网站地图
当前位置: 首页 > 教程频道 > 网站开发 > Web前端 >

Control.ProgressBar 基于百分比的进度条

2012-11-23 
Control.ProgressBar 基于百分比的进度条。Control.ProgressBar是一个采用Prototype开发,基于百分比的进度

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>

all.css 下载: http://livepipe.net/stylesheets/all.css
all.js  下载: http://livepipe.net/javascripts/all.js

热点排行