📄 slider_test.html
字号:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"><html><head> <title>Text effects tests</title> <script type="text/javascript" src="../../lib/prototype.js"></script> <script type="text/javascript" src="../../src/scriptaculous.js"></script></head> <body> <h1>Sliders</h1> <h2>Standard horizontal slider</h2> <div id="track1" style="width:200px;background-color:#aaa;height:5px;"> <div id="handle1" style="width:5px;height:10px;background-color:#f00;"> </div> </div> <p id="debug1"> </p> <h2>Vertical slider</h2> <div id="track2" style="height:100px;background-color:#aaa;width:5px;"> <div id="handle2" style="width:10px;height:5px;background-color:#f00;"> </div> </div> <p id="debug2"> </p> <h2>Slider with predefined values [2,4,6,8] and a non-default range [2,15]</h2> <div id="track3" style="width:200px;background-color:#aaa;height:5px;"> <div id="handle3" style="width:5px;height:10px;background-color:#f00;"> </div> </div> <p id="debug3"> </p> <h2>Slider with multiple handles</h2> <div id="track4" style="width:200px;background-color:#aaa;height:5px;position:relative;"> <div id="handle4-1" style="position:absolute;top:0;left:0;width:5px;height:10px;background-color:#f00;"> </div> <div id="handle4-2" style="position:absolute;top:0;left:0;width:5px;height:10px;background-color:#0f0;"> </div> <div id="handle4-3" style="position:absolute;top:0;left:0;width:5px;height:10px;background-color:#00f;"> </div> </div> <p id="debug4"> </p> <h2>Slider with multiple handles and predefined values</h2> <div id="track5" style="width:200px;background-color:#aaa;height:5px;position:relative;"> <div id="handle5-1" style="opacity:0.5;position:absolute;top:0;left:0;width:5px;height:10px;background-color:#f00;"> </div> <div id="handle5-2" style="opacity:0.5;position:absolute;top:0;left:0;width:5px;height:10px;background-color:#0f0;"> </div> <div id="handle5-3" style="opacity:0.5;position:absolute;top:0;left:0;width:5px;height:10px;background-color:#00f;"> </div> </div> <p id="debug5"> </p> <h2>Slider with multiple handles, external controls, handles are restricted (can't be moved prior/after adjacent handles)</h2> <div id="track6" style="width:200px;background-color:#aaa;height:5px;position:relative;"> <div id="handle6-1" style="position:absolute;top:0;left:0;width:5px;height:10px;background-color:#f00;"> </div> <div id="handle6-2" style="position:absolute;top:0;left:0;width:5px;height:10px;background-color:#0f0;"> </div> </div> <br/><br/> <a href="#" onclick="slider6.setValueBy(-0.1);return false;"><--</a> <a href="#" onclick="slider6.setValueBy(0.1);return false;">--></a> <p id="debug6"> </p> <h2>Fun with spans</h2> <style> #track7 div.handle { background-color:#aaa; color:#444; top:0; left:0; position:absolute; z-index:2; height:100px; font-size:20px; } #track7 div.handle.selected { background-color:#444; color:#fff; } </style> <div id="track7" style="width:300px;background-color:#cbf;height:50px;position:relative;z-index:0;"> <div id="handle7-1" class="handle">1</div> <div id="handle7-2" class="handle">2</div> <div id="handle7-3" class="handle">3</div> <div id="span7-1" style="top:0;left:0;position:absolute;background-color:#000;height:50px;z-index:1;"> </div> <div id="span7-2" style="top:0;left:0;position:absolute;background-color:#444;height:50px;z-index:1;"> </div> <div id="span7-start" style="top:0;left:0;position:absolute;background-color:#f00;height:50px;z-index:1;"> </div> <div id="span7-end" style="top:0;left:0;position:absolute;background-color:#00f;height:50px;z-index:1;"> </div> </div> <br/><br/><br/><br/> <h2>Slider with span and [1,10] range (test for #3731)</h2> <div id="zoom-track" style="width:300px;background-color:#aaa;height:20px;position:relative;z-index:0;"> <div id="zoom-handle-1" style="position:absolute;background-color:#f00;height:20px;z-index:2">!</div> <div id="zoom-handle-2" style="position:absolute;background-color:#0f0;height:20px;z-index:2">!</div> <div id="zoom-track-selected" style="position:absolute;background-color:#00f;height:20px;z-index:1"> </div> </div> <!-- FIXME: add more demos here --> <script type="text/javascript"> // <![CDATA[ new Control.Slider('handle1','track1',{ sliderValue:0.5, onSlide:function(v){$('debug1').innerHTML='slide: '+v}, onChange:function(v){$('debug1').innerHTML='changed! '+v}}); new Control.Slider('handle2','track2',{axis:'vertical', onSlide:function(v){$('debug2').innerHTML='slide: '+v}, onChange:function(v){$('debug2').innerHTML='changed! '+v}}); new Control.Slider('handle3','track3',{values:[2,4,6,8],range:$R(2,15), onSlide:function(v){$('debug3').innerHTML='slide: '+v}, onChange:function(v){$('debug3').innerHTML='changed! '+v}}); new Control.Slider(['handle4-1','handle4-2','handle4-3'],'track4',{ onSlide:function(v){$('debug4').innerHTML='slide: '+v.inspect()}, onChange:function(v){$('debug4').innerHTML='changed! '+v.inspect()}}); new Control.Slider(['handle5-1','handle5-2','handle5-3'],'track5',{values:[0,0.2,0.4,0.6,0.8], onSlide:function(v){$('debug5').innerHTML='slide: '+v.inspect()}, onChange:function(v){$('debug5').innerHTML='changed! '+v.inspect()}}); var slider6 = new Control.Slider(['handle6-1','handle6-2'],'track6',{ sliderValue:[0.3, 0.8], restricted:true, onSlide:function(v){$('debug6').innerHTML='slide: '+v.inspect()}, onChange:function(v){$('debug6').innerHTML='changed! '+v.inspect()}}); new Control.Slider(['handle7-1','handle7-2','handle7-3'], 'track7', { spans:['span7-1','span7-2'], startSpan:'span7-start', endSpan:'span7-end', range:$R(0,300) }); new Control.Slider( ['zoom-handle-1','zoom-handle-2'],'zoom-track',{ sliderValue:[1,10], range:$R(1,10), values:[1,2,3,4,5,6,7,8,9,10], restricted:true, spans:['zoom-track-selected'] }); // ]]> </script> </body></html>⌨️ 快捷键说明
复制代码
Ctrl + C
搜索代码
Ctrl + F
全屏模式
F11
切换主题
Ctrl + Shift + D
显示快捷键
?
增大字号
Ctrl + =
减小字号
Ctrl + -