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

281107072

浏览: 14889 次
性别:
来自: 北京

最近访客更多访客>>

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

2010-03 ( 4)
更多存档...

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

博客分类：

JavaScript

CSS prototype .net HTML

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 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 下载: http://livepipe.net/stylesheets/all.css
all.js 下载: http://livepipe.net/javascripts/all.js

0
顶

0
踩

分享到：