📄 slider_test.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" xml:lang="en" lang="en"><head> <title>script.aculo.us Unit test file</title> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <script src="../../lib/prototype.js" type="text/javascript"></script> <script src="../../src/scriptaculous.js" type="text/javascript"></script> <script src="../../src/unittest.js" type="text/javascript"></script> <link rel="stylesheet" href="../test.css" type="text/css" /></head><body><h1>script.aculo.us Unit test file</h1><p> Test of slider.js</p><div id="track1" style="width:200px;background-color:#aaa;height:5px;"> <div id="handle1" style="width:15px;height:25px;background-color:#f00;"> </div></div><div id="track2-vertical" style="height:100px;background-color:#aaa;width:5px;"> <div id="handle2-vertical" style="width:25px;height:10px;background-color:#f00;"> </div></div><div id="track2-horizontal" style="height:5px;background-color:#aaa;width:100px;"> <div id="handle2-horizontal" style="width:10px;height:25px;background-color:#f00;"> </div></div><div id="track3" style="width:300px;background-color:#cfb;height:30px;"> <span id="handle3-1">1</span> <span id="handle3-2">2</span> <span id="handle3-3">3</span></div> <div id="track4" style="width:300px;position:relative;background-color:#cbf;height:30px;"> <span id="handle4-1" style="top:0;left:0;position:absolute;background-color:#f00;">1</span> <span id="handle4-2" style="top:0;left:0;position:absolute;background-color:#0f0;">2</span> <span id="handle4-3" style="top:0;left:0;position:absolute;background-color:#00f;">3</span></div><div id="track5" style="width:300px;background-color:#cbf;height:30px;position:relative;z-index:0;"> <div id="handle5-1" style="top:0;left:0;position:absolute;background-color:#f00;z-index:2">1</div> <div id="handle5-2" style="top:0;left:0;position:absolute;background-color:#0f0;z-index:2">2</div> <div id="handle5-3" style="top:0;left:0;position:absolute;background-color:#00f;z-index:2">3</div> <div id="span5-1" style="top:0;left:0;position:absolute;background-color:#000;height:20px;z-index:1;"> </div> <div id="span5-2" style="top:0;left:0;position:absolute;background-color:#444;height:20px;z-index:1;"> </div></div><div id="track6" style="width:20px;background-color:#cbf;height:100px;position:relative;z-index:0;"> <div id="handle6-1" style="top:0;left:0;height:13px;position:absolute;background-color:#f00;z-index:2">1</div> <div id="handle6-2" style="top:0;left:0;height:13px;position:absolute;background-color:#0f0;z-index:2">2</div> <div id="handle6-3" style="top:0;left:0;height:13px;position:absolute;background-color:#00f;z-index:2">3</div> <div id="span6-1" style="top:0;left:0;position:absolute;background-color:#000;width:20px;z-index:1;"> </div> <div id="span6-2" style="top:0;left:0;position:absolute;background-color:#444;width:20px;z-index:1;"> </div></div><div id="track7" style="width:200px;background-color:#cbf;height:30px;position:relative;z-index:0;"> <div id="handle7-1" style="top:0;left:0;position:absolute;background-color:#f88;z-index:2">1</div> <div id="handle7-2" style="top:0;left:0;position:absolute;background-color:#8f8;z-index:2">2</div> <div id="handle7-3" style="top:0;left:0;position:absolute;background-color:#88f;z-index:2">3</div> <div id="span7-1" style="top:0;left:0;position:absolute;background-color:#000;height:20px;z-index:1;"> </div> <div id="span7-2" style="top:0;left:0;position:absolute;background-color:#444;height:20px;z-index:1;"> </div> <div id="span7-start" style="top:0;left:0;position:absolute;background-color:#f00;height:20px;z-index:1;"> </div> <div id="span7-end" style="top:0;left:0;position:absolute;background-color:#00f;height:20px;z-index:1;"> </div></div><div id="debug"> </div><!-- Log output --><div id="testlog"> </div><!-- Tests follow --><script type="text/javascript" language="javascript" charset="utf-8">// <![CDATA[ var globalValue; new Test.Unit.Runner({ testSliderBasics: function() { with(this) { var slider = new Control.Slider('handle1', 'track1'); assertInstanceOf(Control.Slider, slider); assertEqual(navigator.appVersion.match(/\bMSIE\b/) ? 5 : 4, Event.observers.length); assertEqual('horizontal', slider.axis); assertEqual(false, slider.disabled); assertEqual(0, slider.value); slider.dispose(); }}, testSliderValues: function() { with(this) { ['horizontal', 'vertical'].each( function(axis) { var slider = new Control.Slider('handle2-'+axis, 'track2-'+axis, {values:[0.2,0.4,0.6,0.8,1],axis:axis}); assertEqual(axis, slider.axis); assertEqual(0.2, slider.value); slider.setValue(0.35); assertEqual(0.4, slider.value); slider.setValueBy(0.1); assertEqual(0.6, slider.value); slider.setValueBy(-0.6); assertEqual(0.2, slider.value); slider.setValue(1); assertEqual(1, slider.value); slider.setValue(-2); assertEqual(0.2, slider.value); slider.setValue(55555); assertEqual(1, slider.value); // leave active to be able to play around with the sliders // slider.dispose(); }); assertEqual("90px", $('handle2-horizontal').style.left); assertEqual("90px", $('handle2-vertical').style.top); }}, testSliderInitialValues: function() { with(this) { var slider = new Control.Slider('handle1', 'track1',{sliderValue:0.5}); assertEqual(0.5, slider.value); var slider = new Control.Slider(['handle4-1','handle4-2','handle4-3'], 'track4', { sliderValue:[50,145,170], values:[50,150,160,170,180], range:$R(50,180) }); assertEqual(50, slider.value); assertEqual(50, slider.values[0]); assertEqual(150, slider.values[1]); assertEqual(170, slider.values[2]); slider.dispose(); var slider = new Control.Slider(['handle4-1','handle4-2','handle4-3'], 'track4', { sliderValue:[50,145,170], values:[50,150,160,170,180] }); assertEqual(50, slider.value); assertEqual(50, slider.values[0]); assertEqual(150, slider.values[1]); assertEqual(170, slider.values[2]); slider.dispose(); var slider = new Control.Slider(['handle4-1','handle4-2','handle4-3'], 'track4', { restricted:true, sliderValue:[50,145,170], values:[50,150,160,170,180] }); assertEqual(50, slider.value); assertEqual(50, slider.values[0]); assertEqual(150, slider.values[1]); assertEqual(170, slider.values[2]); slider.dispose(); }}, testSliderOnChange: function() { with(this) { var slider = new Control.Slider('handle1', 'track1', { onChange:function(v){ globalValue = v; } }); slider.setValue(1); assert(1, globalValue); assert(1, slider.value); slider.setDisabled(); slider.setValue(0.5); assert(1, globalValue); assert(1, slider.value); slider.setEnabled(); slider.setValue(0.2); assert(0.2, globalValue); assert(0.2, slider.value); // s.event should be null if setValue is called from script var slider = new Control.Slider(['handle3-1','handle3-2','handle3-3'], 'track3', { onChange:function(v, s){ if(!s.event) globalValue = v; } }); slider.setValue(0.5,1); assertEqual([0,0.5,0].inspect(), globalValue.inspect()); assert(!slider.event); slider.dispose(); }}, testMultipleHandles: function() { with(this) { var slider = new Control.Slider(['handle3-1','handle3-2','handle3-3'], 'track3', {range:$R(0,300)}); assertInstanceOf(Control.Slider, slider); slider.setValue(20, 0); slider.setValue(50, 1); slider.setValue(70, 2); assertEqual(20, slider.values[0]); assertEqual(50, slider.values[1]); assertEqual(70, slider.values[2]); assertEqual("20px", slider.handles[0].style.left); assertEqual("49px", slider.handles[1].style.left); assertEqual("68px", slider.handles[2].style.left); // should change last manipulated handled by -10, // so check for handle with idx 2 slider.setValueBy(-10); assertEqual(60, slider.values[2]); slider.setValueBy(10, 0); assertEqual(20, slider.values[0]); slider.setValueBy(10, 1); assertEqual(60, slider.values[1]); slider.setValueBy(20, slider.activeHandleIdx); assertEqual(80, slider.values[1]); }}, testMultipleHandlesValues: function() { with(this) { var slider = new Control.Slider(['handle4-1','handle4-2','handle4-3'], 'track4', {values:[50,150,160,170,180],range:$R(50,180)});⌨️ 快捷键说明
复制代码
Ctrl + C
搜索代码
Ctrl + F
全屏模式
F11
切换主题
Ctrl + Shift + D
显示快捷键
?
增大字号
Ctrl + =
减小字号
Ctrl + -