http://wbex.ru/index.php?action=history&feed=atom&title=JavaScript_DHTML%2FScriptaculous%2FSlider
JavaScript DHTML/Scriptaculous/Slider - История изменений
2026-04-04T19:08:10Z
История изменений этой страницы в вики
MediaWiki 1.30.0
http://wbex.ru/index.php?title=JavaScript_DHTML/Scriptaculous/Slider&diff=3642&oldid=prev
в 10:02, 26 мая 2010
2010-05-26T10:02:47Z
<p></p>
<table class="diff diff-contentalign-left" data-mw="interface">
<tr style="vertical-align: top;" lang="ru">
<td colspan="1" style="background-color: white; color:black; text-align: center;">← Предыдущая</td>
<td colspan="1" style="background-color: white; color:black; text-align: center;">Версия 10:02, 26 мая 2010</td>
</tr><tr><td colspan="2" style="text-align: center;" lang="ru"><div class="mw-diff-empty">(нет различий)</div>
</td></tr></table>
http://wbex.ru/index.php?title=JavaScript_DHTML/Scriptaculous/Slider&diff=3643&oldid=prev
Admin: 1 версия
2010-05-26T07:26:56Z
<p>1 версия</p>
<p><b>Новая страница</b></p><div>==Slider with multiple handles==<br />
<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="html4strict"><br />
<br />
<!--<br />
Copyright (c) 2005-2008 Thomas Fuchs (http://script.aculo.us, http://mir.aculo.us)<br />
Permission is hereby granted, free of charge, to any person obtaining<br />
a copy of this software and associated documentation files (the<br />
"Software"), to deal in the Software without restriction, including<br />
without limitation the rights to use, copy, modify, merge, publish,<br />
distribute, sublicense, and/or sell copies of the Software, and to<br />
permit persons to whom the Software is furnished to do so, subject to<br />
the following conditions:<br />
The above copyright notice and this permission notice shall be<br />
included in all copies or substantial portions of the Software.<br />
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,<br />
EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF<br />
MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND<br />
NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE<br />
LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION<br />
OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION<br />
WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.<br />
--><br />
<!-- revised from scriptaculous-js-1.8.2 demo code --><br />
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"><br />
<html><br />
<head><br />
<title>Text effects tests</title><br />
<script type="text/javascript" src="scriptaculous-js-1.8.2/lib/prototype.js"></script> <br />
<script type="text/javascript" src="scriptaculous-js-1.8.2/src/scriptaculous.js"></script><br />
</head> <br />
<body><br />
<h1>Sliders</h1><br />
<br />
<h2>Standard horizontal slider</h2><br />
<br />
<div id="track1" style="width:200px;background-color:#aaa;height:5px;"><br />
<div id="handle1" style="width:5px;height:10px;background-color:#f00;"> </div><br />
</div><br />
<br />
<p id="debug1"> </p><br />
<br />
<h2>Vertical slider</h2><br />
<br />
<div id="track2" style="height:100px;background-color:#aaa;width:5px;"><br />
<div id="handle2" style="width:10px;height:5px;background-color:#f00;"> </div><br />
</div><br />
<br />
<p id="debug2"> </p><br />
<br />
<h2>Slider with predefined values [2,4,6,8] and a non-default range [2,15]</h2><br />
<br />
<div id="track3" style="width:200px;background-color:#aaa;height:5px;"><br />
<div id="handle3" style="width:5px;height:10px;background-color:#f00;"> </div><br />
</div><br />
<br />
<p id="debug3"> </p><br />
<br />
<h2>Slider with multiple handles</h2><br />
<br />
<div id="track4" style="width:200px;background-color:#aaa;height:5px;position:relative;"><br />
<div id="handle4-1" style="position:absolute;top:0;left:0;width:5px;height:10px;background-color:#f00;"> </div><br />
<div id="handle4-2" style="position:absolute;top:0;left:0;width:5px;height:10px;background-color:#0f0;"> </div><br />
<div id="handle4-3" style="position:absolute;top:0;left:0;width:5px;height:10px;background-color:#00f;"> </div><br />
</div><br />
<br />
<p id="debug4"> </p><br />
<br />
<h2>Slider with multiple handles and predefined values</h2><br />
<br />
<div id="track5" style="width:200px;background-color:#aaa;height:5px;position:relative;"><br />
<div id="handle5-1" style="opacity:0.5;position:absolute;top:0;left:0;width:5px;height:10px;background-color:#f00;"> </div><br />
<div id="handle5-2" style="opacity:0.5;position:absolute;top:0;left:0;width:5px;height:10px;background-color:#0f0;"> </div><br />
<div id="handle5-3" style="opacity:0.5;position:absolute;top:0;left:0;width:5px;height:10px;background-color:#00f;"> </div><br />
</div><br />
<br />
<p id="debug5"> </p><br />
<br />
<h2>Slider with multiple handles, external controls, handles are restricted (can"t be moved prior/after adjacent handles)</h2><br />
<br />
<div id="track6" style="width:200px;background-color:#aaa;height:5px;position:relative;"><br />
<div id="handle6-1" style="position:absolute;top:0;left:0;width:5px;height:10px;background-color:#f00;"> </div><br />
<div id="handle6-2" style="position:absolute;top:0;left:0;width:5px;height:10px;background-color:#0f0;"> </div><br />
</div><br />
<br />
<br/><br/><br />
<a href="#" onclick="slider6.setValueBy(-0.1);return false;">&lt;--</a><br />
<a href="#" onclick="slider6.setValueBy(0.1);return false;">--&gt;</a><br />
<br />
<p id="debug6"> </p><br />
<br />
<h2>Fun with spans</h2><br />
<br />
<style><br />
#track7 div.handle {<br />
background-color:#aaa;<br />
color:#444;<br />
top:0;<br />
left:0;<br />
position:absolute;<br />
z-index:2;<br />
height:100px;<br />
font-size:20px;<br />
}<br />
#track7 div.handle.selected {<br />
background-color:#444;<br />
color:#fff;<br />
}<br />
</style><br />
<br />
<div id="track7" style="width:300px;background-color:#cbf;height:50px;position:relative;z-index:0;"><br />
<div id="handle7-1" class="handle">1</div><br />
<div id="handle7-2" class="handle">2</div><br />
<div id="handle7-3" class="handle">3</div><br />
<div id="span7-1" style="top:0;left:0;position:absolute;background-color:#000;height:50px;z-index:1;"> </div><br />
<div id="span7-2" style="top:0;left:0;position:absolute;background-color:#444;height:50px;z-index:1;"> </div><br />
<div id="span7-start" style="top:0;left:0;position:absolute;background-color:#f00;height:50px;z-index:1;"> </div><br />
<div id="span7-end" style="top:0;left:0;position:absolute;background-color:#00f;height:50px;z-index:1;"> </div><br />
</div><br />
<br />
<br/><br/><br/><br/><br />
<br />
<h2>Slider with span and [1,10] range (test for #3731)</h2><br />
<br />
<div id="zoom-track" style="width:300px;background-color:#aaa;height:20px;position:relative;z-index:0;"><br />
<div id="zoom-handle-1" style="position:absolute;background-color:#f00;height:20px;z-index:2">!</div><br />
<div id="zoom-handle-2" style="position:absolute;background-color:#0f0;height:20px;z-index:2">!</div><br />
<div id="zoom-track-selected" style="position:absolute;background-color:#00f;height:20px;z-index:1"> </div><br />
</div><br />
<br />
<br />
<!-- FIXME: add more demos here --><br />
<br />
<script type="text/javascript"><br />
<br />
new Control.Slider("handle1","track1",{<br />
sliderValue:0.5,<br />
onSlide:function(v){$("debug1").innerHTML="slide: "+v},<br />
onChange:function(v){$("debug1").innerHTML="changed! "+v}});<br />
new Control.Slider("handle2","track2",{axis:"vertical",<br />
onSlide:function(v){$("debug2").innerHTML="slide: "+v},<br />
onChange:function(v){$("debug2").innerHTML="changed! "+v}});<br />
new Control.Slider("handle3","track3",{values:[2,4,6,8],range:$R(2,15),<br />
onSlide:function(v){$("debug3").innerHTML="slide: "+v},<br />
onChange:function(v){$("debug3").innerHTML="changed! "+v}});<br />
new Control.Slider(["handle4-1","handle4-2","handle4-3"],"track4",{<br />
onSlide:function(v){$("debug4").innerHTML="slide: "+v.inspect()},<br />
onChange:function(v){$("debug4").innerHTML="changed! "+v.inspect()}});<br />
new Control.Slider(["handle5-1","handle5-2","handle5-3"],"track5",{values:[0,0.2,0.4,0.6,0.8],<br />
onSlide:function(v){$("debug5").innerHTML="slide: "+v.inspect()},<br />
onChange:function(v){$("debug5").innerHTML="changed! "+v.inspect()}});<br />
var slider6 = new Control.Slider(["handle6-1","handle6-2"],"track6",{<br />
sliderValue:[0.3, 0.8],<br />
restricted:true,<br />
onSlide:function(v){$("debug6").innerHTML="slide: "+v.inspect()},<br />
onChange:function(v){$("debug6").innerHTML="changed! "+v.inspect()}});<br />
new Control.Slider(["handle7-1","handle7-2","handle7-3"], "track7",<br />
{ spans:["span7-1","span7-2"],<br />
startSpan:"span7-start",<br />
endSpan:"span7-end",<br />
range:$R(0,300) });<br />
new Control.Slider(<br />
["zoom-handle-1","zoom-handle-2"],"zoom-track",{<br />
sliderValue:[1,10], range:$R(1,10),<br />
values:[1,2,3,4,5,6,7,8,9,10],<br />
restricted:true,<br />
spans:["zoom-track-selected"] });<br />
<br />
</script><br />
<br />
</body><br />
</html><br />
<br />
</source><br />
<br />
<br />
<br />
<br />
==Slider with multiple handles and predefined values==<br />
<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="html4strict"><br />
<br />
<!--<br />
Copyright (c) 2005-2008 Thomas Fuchs (http://script.aculo.us, http://mir.aculo.us)<br />
Permission is hereby granted, free of charge, to any person obtaining<br />
a copy of this software and associated documentation files (the<br />
"Software"), to deal in the Software without restriction, including<br />
without limitation the rights to use, copy, modify, merge, publish,<br />
distribute, sublicense, and/or sell copies of the Software, and to<br />
permit persons to whom the Software is furnished to do so, subject to<br />
the following conditions:<br />
The above copyright notice and this permission notice shall be<br />
included in all copies or substantial portions of the Software.<br />
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,<br />
EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF<br />
MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND<br />
NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE<br />
LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION<br />
OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION<br />
WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.<br />
--><br />
<!-- revised from scriptaculous-js-1.8.2 demo code --><br />
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"><br />
<html><br />
<head><br />
<title>Text effects tests</title><br />
<script type="text/javascript" src="scriptaculous-js-1.8.2/lib/prototype.js"></script> <br />
<script type="text/javascript" src="scriptaculous-js-1.8.2/src/scriptaculous.js"></script><br />
</head> <br />
<body><br />
<h1>Sliders</h1><br />
<br />
<h2>Standard horizontal slider</h2><br />
<br />
<div id="track1" style="width:200px;background-color:#aaa;height:5px;"><br />
<div id="handle1" style="width:5px;height:10px;background-color:#f00;"> </div><br />
</div><br />
<br />
<p id="debug1"> </p><br />
<br />
<h2>Vertical slider</h2><br />
<br />
<div id="track2" style="height:100px;background-color:#aaa;width:5px;"><br />
<div id="handle2" style="width:10px;height:5px;background-color:#f00;"> </div><br />
</div><br />
<br />
<p id="debug2"> </p><br />
<br />
<h2>Slider with predefined values [2,4,6,8] and a non-default range [2,15]</h2><br />
<br />
<div id="track3" style="width:200px;background-color:#aaa;height:5px;"><br />
<div id="handle3" style="width:5px;height:10px;background-color:#f00;"> </div><br />
</div><br />
<br />
<p id="debug3"> </p><br />
<br />
<h2>Slider with multiple handles</h2><br />
<br />
<div id="track4" style="width:200px;background-color:#aaa;height:5px;position:relative;"><br />
<div id="handle4-1" style="position:absolute;top:0;left:0;width:5px;height:10px;background-color:#f00;"> </div><br />
<div id="handle4-2" style="position:absolute;top:0;left:0;width:5px;height:10px;background-color:#0f0;"> </div><br />
<div id="handle4-3" style="position:absolute;top:0;left:0;width:5px;height:10px;background-color:#00f;"> </div><br />
</div><br />
<br />
<p id="debug4"> </p><br />
<br />
<h2>Slider with multiple handles and predefined values</h2><br />
<br />
<div id="track5" style="width:200px;background-color:#aaa;height:5px;position:relative;"><br />
<div id="handle5-1" style="opacity:0.5;position:absolute;top:0;left:0;width:5px;height:10px;background-color:#f00;"> </div><br />
<div id="handle5-2" style="opacity:0.5;position:absolute;top:0;left:0;width:5px;height:10px;background-color:#0f0;"> </div><br />
<div id="handle5-3" style="opacity:0.5;position:absolute;top:0;left:0;width:5px;height:10px;background-color:#00f;"> </div><br />
</div><br />
<br />
<p id="debug5"> </p><br />
<br />
<h2>Slider with multiple handles, external controls, handles are restricted (can"t be moved prior/after adjacent handles)</h2><br />
<br />
<div id="track6" style="width:200px;background-color:#aaa;height:5px;position:relative;"><br />
<div id="handle6-1" style="position:absolute;top:0;left:0;width:5px;height:10px;background-color:#f00;"> </div><br />
<div id="handle6-2" style="position:absolute;top:0;left:0;width:5px;height:10px;background-color:#0f0;"> </div><br />
</div><br />
<br />
<br/><br/><br />
<a href="#" onclick="slider6.setValueBy(-0.1);return false;">&lt;--</a><br />
<a href="#" onclick="slider6.setValueBy(0.1);return false;">--&gt;</a><br />
<br />
<p id="debug6"> </p><br />
<br />
<h2>Fun with spans</h2><br />
<br />
<style><br />
#track7 div.handle {<br />
background-color:#aaa;<br />
color:#444;<br />
top:0;<br />
left:0;<br />
position:absolute;<br />
z-index:2;<br />
height:100px;<br />
font-size:20px;<br />
}<br />
#track7 div.handle.selected {<br />
background-color:#444;<br />
color:#fff;<br />
}<br />
</style><br />
<br />
<div id="track7" style="width:300px;background-color:#cbf;height:50px;position:relative;z-index:0;"><br />
<div id="handle7-1" class="handle">1</div><br />
<div id="handle7-2" class="handle">2</div><br />
<div id="handle7-3" class="handle">3</div><br />
<div id="span7-1" style="top:0;left:0;position:absolute;background-color:#000;height:50px;z-index:1;"> </div><br />
<div id="span7-2" style="top:0;left:0;position:absolute;background-color:#444;height:50px;z-index:1;"> </div><br />
<div id="span7-start" style="top:0;left:0;position:absolute;background-color:#f00;height:50px;z-index:1;"> </div><br />
<div id="span7-end" style="top:0;left:0;position:absolute;background-color:#00f;height:50px;z-index:1;"> </div><br />
</div><br />
<br />
<br/><br/><br/><br/><br />
<br />
<h2>Slider with span and [1,10] range (test for #3731)</h2><br />
<br />
<div id="zoom-track" style="width:300px;background-color:#aaa;height:20px;position:relative;z-index:0;"><br />
<div id="zoom-handle-1" style="position:absolute;background-color:#f00;height:20px;z-index:2">!</div><br />
<div id="zoom-handle-2" style="position:absolute;background-color:#0f0;height:20px;z-index:2">!</div><br />
<div id="zoom-track-selected" style="position:absolute;background-color:#00f;height:20px;z-index:1"> </div><br />
</div><br />
<br />
<br />
<!-- FIXME: add more demos here --><br />
<br />
<script type="text/javascript"><br />
<br />
new Control.Slider("handle1","track1",{<br />
sliderValue:0.5,<br />
onSlide:function(v){$("debug1").innerHTML="slide: "+v},<br />
onChange:function(v){$("debug1").innerHTML="changed! "+v}});<br />
new Control.Slider("handle2","track2",{axis:"vertical",<br />
onSlide:function(v){$("debug2").innerHTML="slide: "+v},<br />
onChange:function(v){$("debug2").innerHTML="changed! "+v}});<br />
new Control.Slider("handle3","track3",{values:[2,4,6,8],range:$R(2,15),<br />
onSlide:function(v){$("debug3").innerHTML="slide: "+v},<br />
onChange:function(v){$("debug3").innerHTML="changed! "+v}});<br />
new Control.Slider(["handle4-1","handle4-2","handle4-3"],"track4",{<br />
onSlide:function(v){$("debug4").innerHTML="slide: "+v.inspect()},<br />
onChange:function(v){$("debug4").innerHTML="changed! "+v.inspect()}});<br />
new Control.Slider(["handle5-1","handle5-2","handle5-3"],"track5",{values:[0,0.2,0.4,0.6,0.8],<br />
onSlide:function(v){$("debug5").innerHTML="slide: "+v.inspect()},<br />
onChange:function(v){$("debug5").innerHTML="changed! "+v.inspect()}});<br />
var slider6 = new Control.Slider(["handle6-1","handle6-2"],"track6",{<br />
sliderValue:[0.3, 0.8],<br />
restricted:true,<br />
onSlide:function(v){$("debug6").innerHTML="slide: "+v.inspect()},<br />
onChange:function(v){$("debug6").innerHTML="changed! "+v.inspect()}});<br />
new Control.Slider(["handle7-1","handle7-2","handle7-3"], "track7",<br />
{ spans:["span7-1","span7-2"],<br />
startSpan:"span7-start",<br />
endSpan:"span7-end",<br />
range:$R(0,300) });<br />
new Control.Slider(<br />
["zoom-handle-1","zoom-handle-2"],"zoom-track",{<br />
sliderValue:[1,10], range:$R(1,10),<br />
values:[1,2,3,4,5,6,7,8,9,10],<br />
restricted:true,<br />
spans:["zoom-track-selected"] });<br />
<br />
</script><br />
<br />
</body><br />
</html><br />
<br />
</source><br />
<br />
<br />
<br />
<br />
==Slider with preset value==<br />
<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="html4strict"><br />
<br />
<!--<br />
Copyright (c) 2005-2008 Thomas Fuchs (http://script.aculo.us, http://mir.aculo.us)<br />
Permission is hereby granted, free of charge, to any person obtaining<br />
a copy of this software and associated documentation files (the<br />
"Software"), to deal in the Software without restriction, including<br />
without limitation the rights to use, copy, modify, merge, publish,<br />
distribute, sublicense, and/or sell copies of the Software, and to<br />
permit persons to whom the Software is furnished to do so, subject to<br />
the following conditions:<br />
The above copyright notice and this permission notice shall be<br />
included in all copies or substantial portions of the Software.<br />
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,<br />
EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF<br />
MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND<br />
NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE<br />
LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION<br />
OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION<br />
WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.<br />
--><br />
<!-- revised from scriptaculous-js-1.8.2 demo code --><br />
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"><br />
<html><br />
<head><br />
<title>Text effects tests</title><br />
<script type="text/javascript" src="scriptaculous-js-1.8.2/lib/prototype.js"></script> <br />
<script type="text/javascript" src="scriptaculous-js-1.8.2/src/scriptaculous.js"></script><br />
</head> <br />
<body><br />
<h1>Sliders</h1><br />
<br />
<h2>Standard horizontal slider</h2><br />
<br />
<div id="track1" style="width:200px;background-color:#aaa;height:5px;"><br />
<div id="handle1" style="width:5px;height:10px;background-color:#f00;"> </div><br />
</div><br />
<br />
<p id="debug1"> </p><br />
<br />
<h2>Vertical slider</h2><br />
<br />
<div id="track2" style="height:100px;background-color:#aaa;width:5px;"><br />
<div id="handle2" style="width:10px;height:5px;background-color:#f00;"> </div><br />
</div><br />
<br />
<p id="debug2"> </p><br />
<br />
<h2>Slider with predefined values [2,4,6,8] and a non-default range [2,15]</h2><br />
<br />
<div id="track3" style="width:200px;background-color:#aaa;height:5px;"><br />
<div id="handle3" style="width:5px;height:10px;background-color:#f00;"> </div><br />
</div><br />
<br />
<p id="debug3"> </p><br />
<br />
<h2>Slider with multiple handles</h2><br />
<br />
<div id="track4" style="width:200px;background-color:#aaa;height:5px;position:relative;"><br />
<div id="handle4-1" style="position:absolute;top:0;left:0;width:5px;height:10px;background-color:#f00;"> </div><br />
<div id="handle4-2" style="position:absolute;top:0;left:0;width:5px;height:10px;background-color:#0f0;"> </div><br />
<div id="handle4-3" style="position:absolute;top:0;left:0;width:5px;height:10px;background-color:#00f;"> </div><br />
</div><br />
<br />
<p id="debug4"> </p><br />
<br />
<h2>Slider with multiple handles and predefined values</h2><br />
<br />
<div id="track5" style="width:200px;background-color:#aaa;height:5px;position:relative;"><br />
<div id="handle5-1" style="opacity:0.5;position:absolute;top:0;left:0;width:5px;height:10px;background-color:#f00;"> </div><br />
<div id="handle5-2" style="opacity:0.5;position:absolute;top:0;left:0;width:5px;height:10px;background-color:#0f0;"> </div><br />
<div id="handle5-3" style="opacity:0.5;position:absolute;top:0;left:0;width:5px;height:10px;background-color:#00f;"> </div><br />
</div><br />
<br />
<p id="debug5"> </p><br />
<br />
<h2>Slider with multiple handles, external controls, handles are restricted (can"t be moved prior/after adjacent handles)</h2><br />
<br />
<div id="track6" style="width:200px;background-color:#aaa;height:5px;position:relative;"><br />
<div id="handle6-1" style="position:absolute;top:0;left:0;width:5px;height:10px;background-color:#f00;"> </div><br />
<div id="handle6-2" style="position:absolute;top:0;left:0;width:5px;height:10px;background-color:#0f0;"> </div><br />
</div><br />
<br />
<br/><br/><br />
<a href="#" onclick="slider6.setValueBy(-0.1);return false;">&lt;--</a><br />
<a href="#" onclick="slider6.setValueBy(0.1);return false;">--&gt;</a><br />
<br />
<p id="debug6"> </p><br />
<br />
<h2>Fun with spans</h2><br />
<br />
<style><br />
#track7 div.handle {<br />
background-color:#aaa;<br />
color:#444;<br />
top:0;<br />
left:0;<br />
position:absolute;<br />
z-index:2;<br />
height:100px;<br />
font-size:20px;<br />
}<br />
#track7 div.handle.selected {<br />
background-color:#444;<br />
color:#fff;<br />
}<br />
</style><br />
<br />
<div id="track7" style="width:300px;background-color:#cbf;height:50px;position:relative;z-index:0;"><br />
<div id="handle7-1" class="handle">1</div><br />
<div id="handle7-2" class="handle">2</div><br />
<div id="handle7-3" class="handle">3</div><br />
<div id="span7-1" style="top:0;left:0;position:absolute;background-color:#000;height:50px;z-index:1;"> </div><br />
<div id="span7-2" style="top:0;left:0;position:absolute;background-color:#444;height:50px;z-index:1;"> </div><br />
<div id="span7-start" style="top:0;left:0;position:absolute;background-color:#f00;height:50px;z-index:1;"> </div><br />
<div id="span7-end" style="top:0;left:0;position:absolute;background-color:#00f;height:50px;z-index:1;"> </div><br />
</div><br />
<br />
<br/><br/><br/><br/><br />
<br />
<h2>Slider with span and [1,10] range (test for #3731)</h2><br />
<br />
<div id="zoom-track" style="width:300px;background-color:#aaa;height:20px;position:relative;z-index:0;"><br />
<div id="zoom-handle-1" style="position:absolute;background-color:#f00;height:20px;z-index:2">!</div><br />
<div id="zoom-handle-2" style="position:absolute;background-color:#0f0;height:20px;z-index:2">!</div><br />
<div id="zoom-track-selected" style="position:absolute;background-color:#00f;height:20px;z-index:1"> </div><br />
</div><br />
<br />
<br />
<!-- FIXME: add more demos here --><br />
<br />
<script type="text/javascript"><br />
<br />
new Control.Slider("handle1","track1",{<br />
sliderValue:0.5,<br />
onSlide:function(v){$("debug1").innerHTML="slide: "+v},<br />
onChange:function(v){$("debug1").innerHTML="changed! "+v}});<br />
new Control.Slider("handle2","track2",{axis:"vertical",<br />
onSlide:function(v){$("debug2").innerHTML="slide: "+v},<br />
onChange:function(v){$("debug2").innerHTML="changed! "+v}});<br />
new Control.Slider("handle3","track3",{values:[2,4,6,8],range:$R(2,15),<br />
onSlide:function(v){$("debug3").innerHTML="slide: "+v},<br />
onChange:function(v){$("debug3").innerHTML="changed! "+v}});<br />
new Control.Slider(["handle4-1","handle4-2","handle4-3"],"track4",{<br />
onSlide:function(v){$("debug4").innerHTML="slide: "+v.inspect()},<br />
onChange:function(v){$("debug4").innerHTML="changed! "+v.inspect()}});<br />
new Control.Slider(["handle5-1","handle5-2","handle5-3"],"track5",{values:[0,0.2,0.4,0.6,0.8],<br />
onSlide:function(v){$("debug5").innerHTML="slide: "+v.inspect()},<br />
onChange:function(v){$("debug5").innerHTML="changed! "+v.inspect()}});<br />
var slider6 = new Control.Slider(["handle6-1","handle6-2"],"track6",{<br />
sliderValue:[0.3, 0.8],<br />
restricted:true,<br />
onSlide:function(v){$("debug6").innerHTML="slide: "+v.inspect()},<br />
onChange:function(v){$("debug6").innerHTML="changed! "+v.inspect()}});<br />
new Control.Slider(["handle7-1","handle7-2","handle7-3"], "track7",<br />
{ spans:["span7-1","span7-2"],<br />
startSpan:"span7-start",<br />
endSpan:"span7-end",<br />
range:$R(0,300) });<br />
new Control.Slider(<br />
["zoom-handle-1","zoom-handle-2"],"zoom-track",{<br />
sliderValue:[1,10], range:$R(1,10),<br />
values:[1,2,3,4,5,6,7,8,9,10],<br />
restricted:true,<br />
spans:["zoom-track-selected"] });<br />
<br />
</script><br />
<br />
</body><br />
</html><br />
<br />
</source><br />
<br />
<br />
<br />
<br />
==Vertical slider, standard slider==<br />
<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="html4strict"><br />
<br />
<!--<br />
Copyright (c) 2005-2008 Thomas Fuchs (http://script.aculo.us, http://mir.aculo.us)<br />
Permission is hereby granted, free of charge, to any person obtaining<br />
a copy of this software and associated documentation files (the<br />
"Software"), to deal in the Software without restriction, including<br />
without limitation the rights to use, copy, modify, merge, publish,<br />
distribute, sublicense, and/or sell copies of the Software, and to<br />
permit persons to whom the Software is furnished to do so, subject to<br />
the following conditions:<br />
The above copyright notice and this permission notice shall be<br />
included in all copies or substantial portions of the Software.<br />
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,<br />
EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF<br />
MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND<br />
NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE<br />
LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION<br />
OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION<br />
WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.<br />
--><br />
<!-- revised from scriptaculous-js-1.8.2 demo code --><br />
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"><br />
<html><br />
<head><br />
<title>Text effects tests</title><br />
<script type="text/javascript" src="scriptaculous-js-1.8.2/lib/prototype.js"></script> <br />
<script type="text/javascript" src="scriptaculous-js-1.8.2/src/scriptaculous.js"></script><br />
</head> <br />
<body><br />
<h1>Sliders</h1><br />
<br />
<h2>Standard horizontal slider</h2><br />
<br />
<div id="track1" style="width:200px;background-color:#aaa;height:5px;"><br />
<div id="handle1" style="width:5px;height:10px;background-color:#f00;"> </div><br />
</div><br />
<br />
<p id="debug1"> </p><br />
<br />
<h2>Vertical slider</h2><br />
<br />
<div id="track2" style="height:100px;background-color:#aaa;width:5px;"><br />
<div id="handle2" style="width:10px;height:5px;background-color:#f00;"> </div><br />
</div><br />
<br />
<p id="debug2"> </p><br />
<br />
<h2>Slider with predefined values [2,4,6,8] and a non-default range [2,15]</h2><br />
<br />
<div id="track3" style="width:200px;background-color:#aaa;height:5px;"><br />
<div id="handle3" style="width:5px;height:10px;background-color:#f00;"> </div><br />
</div><br />
<br />
<p id="debug3"> </p><br />
<br />
<h2>Slider with multiple handles</h2><br />
<br />
<div id="track4" style="width:200px;background-color:#aaa;height:5px;position:relative;"><br />
<div id="handle4-1" style="position:absolute;top:0;left:0;width:5px;height:10px;background-color:#f00;"> </div><br />
<div id="handle4-2" style="position:absolute;top:0;left:0;width:5px;height:10px;background-color:#0f0;"> </div><br />
<div id="handle4-3" style="position:absolute;top:0;left:0;width:5px;height:10px;background-color:#00f;"> </div><br />
</div><br />
<br />
<p id="debug4"> </p><br />
<br />
<h2>Slider with multiple handles and predefined values</h2><br />
<br />
<div id="track5" style="width:200px;background-color:#aaa;height:5px;position:relative;"><br />
<div id="handle5-1" style="opacity:0.5;position:absolute;top:0;left:0;width:5px;height:10px;background-color:#f00;"> </div><br />
<div id="handle5-2" style="opacity:0.5;position:absolute;top:0;left:0;width:5px;height:10px;background-color:#0f0;"> </div><br />
<div id="handle5-3" style="opacity:0.5;position:absolute;top:0;left:0;width:5px;height:10px;background-color:#00f;"> </div><br />
</div><br />
<br />
<p id="debug5"> </p><br />
<br />
<h2>Slider with multiple handles, external controls, handles are restricted (can"t be moved prior/after adjacent handles)</h2><br />
<br />
<div id="track6" style="width:200px;background-color:#aaa;height:5px;position:relative;"><br />
<div id="handle6-1" style="position:absolute;top:0;left:0;width:5px;height:10px;background-color:#f00;"> </div><br />
<div id="handle6-2" style="position:absolute;top:0;left:0;width:5px;height:10px;background-color:#0f0;"> </div><br />
</div><br />
<br />
<br/><br/><br />
<a href="#" onclick="slider6.setValueBy(-0.1);return false;">&lt;--</a><br />
<a href="#" onclick="slider6.setValueBy(0.1);return false;">--&gt;</a><br />
<br />
<p id="debug6"> </p><br />
<br />
<h2>Fun with spans</h2><br />
<br />
<style><br />
#track7 div.handle {<br />
background-color:#aaa;<br />
color:#444;<br />
top:0;<br />
left:0;<br />
position:absolute;<br />
z-index:2;<br />
height:100px;<br />
font-size:20px;<br />
}<br />
#track7 div.handle.selected {<br />
background-color:#444;<br />
color:#fff;<br />
}<br />
</style><br />
<br />
<div id="track7" style="width:300px;background-color:#cbf;height:50px;position:relative;z-index:0;"><br />
<div id="handle7-1" class="handle">1</div><br />
<div id="handle7-2" class="handle">2</div><br />
<div id="handle7-3" class="handle">3</div><br />
<div id="span7-1" style="top:0;left:0;position:absolute;background-color:#000;height:50px;z-index:1;"> </div><br />
<div id="span7-2" style="top:0;left:0;position:absolute;background-color:#444;height:50px;z-index:1;"> </div><br />
<div id="span7-start" style="top:0;left:0;position:absolute;background-color:#f00;height:50px;z-index:1;"> </div><br />
<div id="span7-end" style="top:0;left:0;position:absolute;background-color:#00f;height:50px;z-index:1;"> </div><br />
</div><br />
<br />
<br/><br/><br/><br/><br />
<br />
<h2>Slider with span and [1,10] range (test for #3731)</h2><br />
<br />
<div id="zoom-track" style="width:300px;background-color:#aaa;height:20px;position:relative;z-index:0;"><br />
<div id="zoom-handle-1" style="position:absolute;background-color:#f00;height:20px;z-index:2">!</div><br />
<div id="zoom-handle-2" style="position:absolute;background-color:#0f0;height:20px;z-index:2">!</div><br />
<div id="zoom-track-selected" style="position:absolute;background-color:#00f;height:20px;z-index:1"> </div><br />
</div><br />
<br />
<br />
<!-- FIXME: add more demos here --><br />
<br />
<script type="text/javascript"><br />
<br />
new Control.Slider("handle1","track1",{<br />
sliderValue:0.5,<br />
onSlide:function(v){$("debug1").innerHTML="slide: "+v},<br />
onChange:function(v){$("debug1").innerHTML="changed! "+v}});<br />
new Control.Slider("handle2","track2",{axis:"vertical",<br />
onSlide:function(v){$("debug2").innerHTML="slide: "+v},<br />
onChange:function(v){$("debug2").innerHTML="changed! "+v}});<br />
new Control.Slider("handle3","track3",{values:[2,4,6,8],range:$R(2,15),<br />
onSlide:function(v){$("debug3").innerHTML="slide: "+v},<br />
onChange:function(v){$("debug3").innerHTML="changed! "+v}});<br />
new Control.Slider(["handle4-1","handle4-2","handle4-3"],"track4",{<br />
onSlide:function(v){$("debug4").innerHTML="slide: "+v.inspect()},<br />
onChange:function(v){$("debug4").innerHTML="changed! "+v.inspect()}});<br />
new Control.Slider(["handle5-1","handle5-2","handle5-3"],"track5",{values:[0,0.2,0.4,0.6,0.8],<br />
onSlide:function(v){$("debug5").innerHTML="slide: "+v.inspect()},<br />
onChange:function(v){$("debug5").innerHTML="changed! "+v.inspect()}});<br />
var slider6 = new Control.Slider(["handle6-1","handle6-2"],"track6",{<br />
sliderValue:[0.3, 0.8],<br />
restricted:true,<br />
onSlide:function(v){$("debug6").innerHTML="slide: "+v.inspect()},<br />
onChange:function(v){$("debug6").innerHTML="changed! "+v.inspect()}});<br />
new Control.Slider(["handle7-1","handle7-2","handle7-3"], "track7",<br />
{ spans:["span7-1","span7-2"],<br />
startSpan:"span7-start",<br />
endSpan:"span7-end",<br />
range:$R(0,300) });<br />
new Control.Slider(<br />
["zoom-handle-1","zoom-handle-2"],"zoom-track",{<br />
sliderValue:[1,10], range:$R(1,10),<br />
values:[1,2,3,4,5,6,7,8,9,10],<br />
restricted:true,<br />
spans:["zoom-track-selected"] });<br />
<br />
</script><br />
<br />
</body><br />
</html><br />
<br />
</source></div>
Admin