MooTools滑块是一个很好的小应用程序，它为将滑块工具添加到站点提供了一种可靠的方法。但是，MooTool滑块缺少的一件事是一个块，覆盖了滑块左侧，手柄之前的内容。
用以下HTML创建一个页面。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <script type="text/javascript" xx_src="./script/mootools.js"></script> <link href="./style/slider.css" rel="stylesheet" type="text/css" /> </head> <body> <div id="track1"> <span id="track1span"></span><div id="handle1"><img xx_src="./style/slider/handle.png" id="handle1Image" alt="Drag Me" /></div> </div> <p id="test"></p> <script type="text/javascript" xx_src="./script/slider.js"></script> </body> </html>
滑块元素具有以下结构。
div <- container for the slider ---span <- the span element ---div <- handle ------img <- image to make the handle pretty
您将需要下载MooTools库才能运行此工具。
创建一个样式文件（slider.css在名为style的目录中调用）并添加以下内容。
#track1{
width:500px;
padding:0;
margin:0;
height:18px;
background-color: #09f;
}
#handle1{
padding:0;
margin:-20px 0 0 0;
width:18px;
height:18px;
}
span#track1span{
display:block;
padding:0;
margin:0;
background-color: #222;
height:18px;
width:50%;
}现在是脚本的重要部分。slider.js在脚本目录中创建一个名为的文件，并在其中添加以下代码。我在此处添加了很多注释，以使每一行的工作变得清晰。
// 设置轨道阵列
var handleArr = new Object();
handleArr["track1"]=250; // 设定初始值
// 设置滑块的效果
var track1Span = new Fx.Style($('track1span'),'width',{duration:0});
var slider1 = new Slider($('track1'),$('handle1'),{
steps:500, // 赛道上有250步
offset:0, // 零偏移使手柄适合轨道
onChange: function(pos){
track1Span.set(pos);
handleArr['track1'] = parseInt(pos); // 店铺位置
updateTestDiv(); // 运行功能来做某事
}
}).set(handleArr["track1"]); // 设定初始位置
// 用于更新带有手柄位置的测试标签的功能
function updateTestDiv(pos){
$('test').innerHTML = handleArr['track1'];
}该滑块所做的全部工作就是使用滑块手柄的当前位置用测试ID更新ap标签。
关于此脚本的理想之处在于，在其中添加更多轨道非常容易，您只需要稍微复制一下代码即可为slider2创建变量，依此类推。