创建具有跨度元素的MooTools滑块
MooTools滑块是一个很好的小应用程序,它为将滑块工具添加到站点提供了一种可靠的方法。但是,MooTool滑块缺少的一件事是一个块,覆盖了滑块左侧,手柄之前的内容。
用以下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创建变量,依此类推。