You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
88 lines
3.8 KiB
88 lines
3.8 KiB
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" |
|
"http://www.w3.org/TR/html4/strict.dtd"> |
|
<html> |
|
<head> |
|
<title>Slider Widget Demo</title> |
|
<script type="text/javascript"> |
|
var djConfig = { |
|
isDebug: true, |
|
debugAtAllCosts: false, |
|
parseWidgets: true |
|
}; |
|
</script> |
|
<script type="text/javascript" src="../../dojo.js"></script> |
|
<script type="text/javascript"> |
|
dojo.require ("dojo.widget.*"); |
|
dojo.require ("dojo.widget.Slider"); |
|
</script> |
|
</head> |
|
|
|
<body bgcolor="#C0C0C0"> |
|
<h1>Slider Widget Demo</h1> |
|
This page demos the three types of slider widgets, with slightly different behaviours. |
|
<table border="1"> |
|
<thead><tr><td>Type</td><td>Range</td><td>onDragMove</td><td>onDragEnd</td><td>onClick</td><td>reversed</td></tr></thead> |
|
<tbody> |
|
<tr><td>vertical</td><td>1..9</td><td> </td><td>update text field</td><td>update text field</td><td>yes</td></tr> |
|
<tr><td>horizontal</td><td>-10..10</td><td>update text field</td><td> </td><td>update text field</td><td>no</td></tr> |
|
<tr><td>box</td><td>0..10</td><td> </td><td>update text field</td><td> </td><td>X:yes<br>Y:no</td></tr> |
|
</tbody> |
|
</table> |
|
|
|
Red, blue, and green borders shown to test the correct placement of slider components.<br> |
|
<table> |
|
<tr><td></td><td style="border:2px solid green;line-height:0px;white-space:nowrap;"> |
|
[before]<div id="horizontalSlider" dojoType="SliderHorizontal" |
|
initialValue="5" minimum="-10" maximum="10" snapValues="11" |
|
activeDrag="true" |
|
onValueChanged="dojo.byId('horizontalSliderValue').value = arguments[0];" |
|
buttonStyle="top:1px;" |
|
backgroundStyle="padding:8px 4px 8px 4px;border:1px solid red;" |
|
backgroundSize="width:100px;height:5px;" |
|
backgroundSrc="src/widget/templates/images/blank.gif" |
|
progressBackgroundSrc="src/widget/templates/images/slider-bg.gif" |
|
handleStyle="top:0px;width:13px;height:18px;" |
|
handleSrc="src/widget/templates/images/slider.gif" |
|
style="border:solid blue;border-width:16px 12px 8px 4px;padding:4px 8px 12px 16px;margin:9px;" |
|
></div>[after]</td> |
|
<td rowspan="2" style="border:2px solid green;line-height:0px;white-space:nowrap;vertical-align:middle;"> |
|
[before]<div id="boxSlider" dojoType="Slider" maximumX="10" maximumY="10" minimumX="0" minimumY="0" initialValueX="5" initialValueY="5" |
|
clickSelect="false" |
|
showButtons="false" |
|
backgroundStyle="padding:2px 4px 8px 16px;border:1px solid red;" |
|
backgroundSize="width:200px;height:200px;" |
|
handleStyle="top:-1px;" |
|
onValueChanged="dojo.byId('boxX').value = arguments[0]; dojo.byId('boxY').value = arguments[1];" |
|
flipX="true" |
|
></div>[after]</td> |
|
</tr> |
|
<tr><td style="border:2px solid green;line-height:0px;white-space:nowrap;"> |
|
[before]<div id="verticalSlider" dojoType="SliderVertical" |
|
initialValue="5" snapValues="9" maximum="9" minimum="1" |
|
clickSelect="true" |
|
onValueChanged="dojo.byId('verticalSliderValue').value = arguments[0];" |
|
buttonStyle="width:28px;height:16px;" |
|
backgroundStyle="padding:8px 8px 8px 8px;border:1px solid red;background-color:yellow;" |
|
progressBackgroundSrc="src/widget/templates/images/slider-bg-progress-vert.gif" |
|
handleStyle="left:2px;top:-1px;" |
|
handleSrc="src/widget/templates/images/slider-button-vert.png" |
|
flip="true" |
|
></div>[after]</td></tr> |
|
</table> |
|
|
|
<p> |
|
Horizontal Slider Value: |
|
<input |
|
id="horizontalSliderValue" name="horizontalSliderValue" value="0"/> |
|
<button onclick="dojo.widget.byId ('horizontalSlider').setValue (dojo.byId('horizontalSliderValue').value)">set</button> <i>(updates when slider handle is moved)</i><br /> |
|
Vertical Slider Value: |
|
<input id="verticalSliderValue" name="verticalSliderValue" value="0"/> |
|
<button onclick="dojo.widget.byId ('verticalSlider').setValue (dojo.byId('verticalSliderValue').value)">set</button> <i>(updates when slider handle drag ends)</i><br /> |
|
Box Slider Value: |
|
<input id="boxX" name="boxX" value="0"/> |
|
<input id="boxY" name="boxY" value="0"/> |
|
</p> |
|
<p><u>Debug Messages</u></p> |
|
|
|
</body> |
|
</html>
|
|
|