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.
89 lines
3.8 KiB
89 lines
3.8 KiB
2 years ago
|
<!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>
|