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

最新推荐文章于 2020-11-23 23:54:35 发布

老-马

最新推荐文章于 2020-11-23 23:54:35 发布

阅读量126

点赞数

分类专栏： JavaScript 文章标签： CSS prototype .net HTML

JavaScript 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

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>