JavaScript DHTML/Scriptaculous/Slider — различия между версиями
Admin (обсуждение | вклад) м (1 версия) |
Admin (обсуждение | вклад) м (1 версия) |
(нет различий)
|
Текущая версия на 10:26, 26 мая 2010
Содержание
- 1 Slider with multiple handles
- 2 Sliders
- 2.1 Standard horizontal slider
- 2.2 Vertical slider
- 2.3 Slider with predefined values [2,4,6,8] and a non-default range [2,15]
- 2.4 Slider with multiple handles
- 2.5 Slider with multiple handles and predefined values
- 2.6 Slider with multiple handles, external controls, handles are restricted (can"t be moved prior/after adjacent handles)
- 2.7 Fun with spans
- 2.8 Slider with span and [1,10] range (test for #3731)
- 2.9 Slider with multiple handles and predefined values
- 3 Sliders
- 3.1 Standard horizontal slider
- 3.2 Vertical slider
- 3.3 Slider with predefined values [2,4,6,8] and a non-default range [2,15]
- 3.4 Slider with multiple handles
- 3.5 Slider with multiple handles and predefined values
- 3.6 Slider with multiple handles, external controls, handles are restricted (can"t be moved prior/after adjacent handles)
- 3.7 Fun with spans
- 3.8 Slider with span and [1,10] range (test for #3731)
- 3.9 Slider with preset value
- 4 Sliders
- 4.1 Standard horizontal slider
- 4.2 Vertical slider
- 4.3 Slider with predefined values [2,4,6,8] and a non-default range [2,15]
- 4.4 Slider with multiple handles
- 4.5 Slider with multiple handles and predefined values
- 4.6 Slider with multiple handles, external controls, handles are restricted (can"t be moved prior/after adjacent handles)
- 4.7 Fun with spans
- 4.8 Slider with span and [1,10] range (test for #3731)
- 4.9 Vertical slider, standard slider
- 5 Sliders
- 5.1 Standard horizontal slider
- 5.2 Vertical slider
- 5.3 Slider with predefined values [2,4,6,8] and a non-default range [2,15]
- 5.4 Slider with multiple handles
- 5.5 Slider with multiple handles and predefined values
- 5.6 Slider with multiple handles, external controls, handles are restricted (can"t be moved prior/after adjacent handles)
- 5.7 Fun with spans
- 5.8 Slider with span and [1,10] range (test for #3731)
Slider with multiple handles
<source lang="html4strict">
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<title>Text effects tests</title> <script type="text/javascript" src="scriptaculous-js-1.8.2/lib/prototype.js"></script> <script type="text/javascript" src="scriptaculous-js-1.8.2/src/scriptaculous.js"></script>
</head> <body>
Sliders
Standard horizontal slider
Vertical slider
Slider with predefined values [2,4,6,8] and a non-default range [2,15]
Slider with multiple handles
Slider with multiple handles and predefined values
Slider with multiple handles, external controls, handles are restricted (can"t be moved prior/after adjacent handles)
<a href="#" onclick="slider6.setValueBy(-0.1);return false;"><--</a> <a href="#" onclick="slider6.setValueBy(0.1);return false;">--></a>
Fun with spans
<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>
1
2
3
Slider with span and [1,10] range (test for #3731)
!
!
<script type="text/javascript"> 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>
</source>
Slider with multiple handles and predefined values
<source lang="html4strict">
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<title>Text effects tests</title> <script type="text/javascript" src="scriptaculous-js-1.8.2/lib/prototype.js"></script> <script type="text/javascript" src="scriptaculous-js-1.8.2/src/scriptaculous.js"></script>
</head> <body>
Sliders
Standard horizontal slider
Vertical slider
Slider with predefined values [2,4,6,8] and a non-default range [2,15]
Slider with multiple handles
Slider with multiple handles and predefined values
Slider with multiple handles, external controls, handles are restricted (can"t be moved prior/after adjacent handles)
<a href="#" onclick="slider6.setValueBy(-0.1);return false;"><--</a> <a href="#" onclick="slider6.setValueBy(0.1);return false;">--></a>
Fun with spans
<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>
1
2
3
Slider with span and [1,10] range (test for #3731)
!
!
<script type="text/javascript"> 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>
</source>
Slider with preset value
<source lang="html4strict">
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<title>Text effects tests</title> <script type="text/javascript" src="scriptaculous-js-1.8.2/lib/prototype.js"></script> <script type="text/javascript" src="scriptaculous-js-1.8.2/src/scriptaculous.js"></script>
</head> <body>
Sliders
Standard horizontal slider
Vertical slider
Slider with predefined values [2,4,6,8] and a non-default range [2,15]
Slider with multiple handles
Slider with multiple handles and predefined values
Slider with multiple handles, external controls, handles are restricted (can"t be moved prior/after adjacent handles)
<a href="#" onclick="slider6.setValueBy(-0.1);return false;"><--</a> <a href="#" onclick="slider6.setValueBy(0.1);return false;">--></a>
Fun with spans
<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>
1
2
3
Slider with span and [1,10] range (test for #3731)
!
!
<script type="text/javascript"> 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>
</source>
Vertical slider, standard slider
<source lang="html4strict">
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<title>Text effects tests</title> <script type="text/javascript" src="scriptaculous-js-1.8.2/lib/prototype.js"></script> <script type="text/javascript" src="scriptaculous-js-1.8.2/src/scriptaculous.js"></script>
</head> <body>
Sliders
Standard horizontal slider
Vertical slider
Slider with predefined values [2,4,6,8] and a non-default range [2,15]
Slider with multiple handles
Slider with multiple handles and predefined values
Slider with multiple handles, external controls, handles are restricted (can"t be moved prior/after adjacent handles)
<a href="#" onclick="slider6.setValueBy(-0.1);return false;"><--</a> <a href="#" onclick="slider6.setValueBy(0.1);return false;">--></a>
Fun with spans
<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>
1
2
3
Slider with span and [1,10] range (test for #3731)
!
!
<script type="text/javascript"> 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>
</source>