152 lines
6.2 KiB
HTML
Executable File
152 lines
6.2 KiB
HTML
Executable File
|
|
<!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> |