Control.ProgressBar 基于百分比的进度条。
罗昕
Control.ProgressBar是一个采用Prototype开发，基于百分比的进度条。
我试了一下还是挺好用的.
源码如下:
all.css 下载: [url]http://livepipe.net/stylesheets/all.css[/url]
all.js 下载: [url]http://livepipe.net/javascripts/all.js[/url]
我试了一下还是挺好用的.
源码如下:
<!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 class="control">
<div id="progress_bar"></div> <div style="margin-top:10px;">
<input type="button" 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 下载: [url]http://livepipe.net/stylesheets/all.css[/url]
all.js 下载: [url]http://livepipe.net/javascripts/all.js[/url]
类似资料：