用scriptaculous实现slider

xly_971223

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

最近访客更多访客>>

doupeng

ymgjava

AndrewXing

sun80264629

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

CSS JSP HTML

今天做一个播放器的声音控制按钮本想自己用js+css来实现，忽然想起了scriptaculous的特效不如用它来实现
赶紧下载了scriptaculous 网址为：script.aculo.us
解压后把js文件放到自己喜欢的目录，一共有7 8个吧，然后导入你的jsp文件中

<script type="text/javascript" src="scripts/scriptaculous/prototype.js"></script>
		<script type="text/javascript" src="scripts/scriptaculous/scriptaculous.js"></script>

开始完成我的slider
scriptaculous要求你的滑动条是两个div嵌套的外层div作为容器里面的div作为滑动手柄如下

<div id="volumetrack" style="border:1px solid red; height:10; width:400;">
			<div id="volumehandle" style="border:1px solid yellow; float:left; cursor:hand;"><img src="img/yinliang2.gif" /></div>
        </div>

手柄样式可以根据自己的喜好指定这儿指定的是一张图片<img src="img/yinliang2.gif" />
然后开始写我们的js代码
非常简单一个类就搞定了

function init(){
				oSlider = new Control.Slider( 'volumehandle', 'volumetrack', 
					{
						axis:'horizontal',
						sliderValue:120,
						range:$R(40,240),
						minimum:40,
						maximum:240,
						values:[40,80,120,160,200,240],
						onChange:function(v){ alert(v); }
					} 
				);
			}

参数就不用多解释了吧相信都能看懂更多参数去官方网站查询
最后有一句是调用这个init方法的，意思应该是在窗口加载的时候执行init方法
Event.observe(window,'load',init);
ok 一个漂亮的slider就完成了
附完整代码

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
	<head>
		<title>testSlider.html</title>

		<!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
		<script type="text/javascript" src="scripts/scriptaculous/prototype.js"></script>
		<script type="text/javascript" src="scripts/scriptaculous/scriptaculous.js"></script>
		<script language="javascript">
			var oSlider = null;
			function init(){
				oSlider = new Control.Slider( 'volumehandle', 'volumetrack', 
					{
						axis:'horizontal',
						sliderValue:120,
						range:$R(40,240),
						minimum:40,
						maximum:240,
						values:[40,80,120,160,200,240],
						onChange:function(v){ alert(v); }
					} 
				);
			}
			
			Event.observe(window,'load',init);
		</script>
	</head>

	<body>
		<div id="volumetrack" style="border:1px solid red; height:10; width:400;">
			<div id="volumehandle" style="border:1px solid yellow; float:left; cursor:hand;"><img src="img/yinliang2.gif" /></div>
        </div>
		<br>
	</body>
</html>

分享到：