Page MenuHomeCode
Files F885623

test_Slider.html
No OneTemporary
Actions

test_Slider.html
View Options

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Dojo Slider Widget Demo</title>
<script type="text/javascript" src="../../../dojo/dojo.js"
djConfig="isDebug: true, parseOnLoad: true, extraLocale: ['de-de', 'en-us']"></script>
<script type="text/javascript" src="../_testCommon.js"></script>
<script type="text/javascript">
dojo.require("dijit.form.Slider");
dojo.require("dijit.form.Button");
dojo.require("dojo.parser"); // scan page for widgets
dojo.addOnLoad(function(){
dijit.byId("sliderH2").setDisabled(true);
});
</script>
<style type="text/css">
@import "../../../dojo/resources/dojo.css";
@import "../css/dijitTests.css";
#slider2 .dijitButtonNode {
width:12px;
height:12px;
border: none;
font-size:11px;
padding:0px;
}
</style>
</head>
<body>
<h1 class="testTitle">Slider</h1>
Also try using the arrow keys, buttons, or clicking on the progress bar to move the slider.
<br>
<br>initial value=10, min=0, max=100, pageIncrement=100, onChange event triggers input box value change immediately<br>
<div dojoType="dijit.form.HorizontalSlider" name="horizontal1"
onChange="dojo.byId('slider1input').value=dojo.number.format(arguments[0]/100,{places:1,pattern:'#%'});"
value="10"
maximum="100"
minimum="0"
pageIncrement="100"
showButtons="false"
intermediateChanges="true"
style="width:50%; height: 20px;"
id="slider1">
<ol dojoType="dijit.form.HorizontalRuleLabels" container="topDecoration" style="height:1.2em;font-size:75%;color:gray;" count="6" numericMargin="1"></ol>
<div dojoType="dijit.form.HorizontalRule" container="topDecoration" count=6 style="height:5px;"></div>
<div dojoType="dijit.form.HorizontalRule" container="bottomDecoration" count=5 style="height:5px;"></div>
<ol dojoType="dijit.form.HorizontalRuleLabels" container="bottomDecoration" style="height:1em;font-size:75%;color:gray;">
<li>lowest</li>
<li>normal</li>
<li>highest</li>
</ol>
</div>
Slider1 Value:<input readonly id="slider1input" size="4" value="10.0%">
<br>
<button id="disableButton" dojoType="dijit.form.Button" onClick="dijit.byId('slider1').setDisabled( true);dijit.byId('disableButton').setDisabled(true);dijit.byId('enableButton').setDisabled(false);">Disable previous slider</button>
<button id="enableButton" dojoType="dijit.form.Button" onClick="dijit.byId('slider1').setDisabled(false);dijit.byId('disableButton').setDisabled(false);dijit.byId('enableButton').setDisabled( true);" disabled>Enable previous slider</button>
<br>
<br>initial value=10, min=0, max=100, onChange event triggers input box value change when you mouse up or tab away<br>
<div dojoType="dijit.form.VerticalSlider" name="vertical1"
onChange="dojo.byId('slider2input').value=arguments[0];"
value="10"
maximum="100"
minimum="0"
discreteValues="11"
style="height:300px;"
id="slider2">
<ol dojoType="dijit.form.VerticalRuleLabels" container="leftDecoration" style="width:2em;color:gray;" labelStyle="right:0px;">
<li>0</li>
<li>100</li>
</ol>
<div dojoType="dijit.form.VerticalRule" container="leftDecoration" count=11 style="width:5px;" ruleStyle="border-color:gray;"></div>
<div dojoType="dijit.form.VerticalRule" container="rightDecoration" count=11 style="width:5px;" ruleStyle="border-color:gray;"></div>
<ol dojoType="dijit.form.VerticalRuleLabels" container="rightDecoration" style="width:2em;color:gray;" count="6" numericMargin="1" maximum="100" constraints={pattern:'#'}></ol>
</div>
Slider2 Value:<input readonly id="slider2input" size="3" value="10">
<h1>Fancy HTML labels:</h1>
<div dojoType="dijit.form.HorizontalSlider" name="horizontal2"
minimum="1"
value="2"
maximum="3"
discreteValues="3"
showButtons="false"
intermediateChanges="true"
style="width:300px; height: 40px;"
id="slider3">
<div dojoType="dijit.form.HorizontalRule" container="bottomDecoration" count=3 style="height:5px;"></div>
<ol dojoType="dijit.form.HorizontalRuleLabels" container="bottomDecoration" style="height:1em;font-size:75%;color:gray;">
<li><img width=10 height=10 src="../images/note.gif"><br><span style="font-size: small">small</span></li>
<li><img width=15 height=15 src="../images/note.gif"><br><span style="font-size: medium">medium</span></li>
<li><img width=20 height=20 src="../images/note.gif"><br><span style="font-size: large">large</span></li>
</ol>
</div>
<p></p><h1>Standalone ruler example:</h1><p></p>
<div style="width:2in;border-top:1px solid black;">
<div dojoType="dijit.form.HorizontalRule" count=17 style="height:.4em;"></div>
<div dojoType="dijit.form.HorizontalRule" count=9 style="height:.4em;"></div>
<div dojoType="dijit.form.HorizontalRule" count=5 style="height:.4em;"></div>
<div dojoType="dijit.form.HorizontalRule" count=3 style="height:.4em;"></div>
<ol dojoType="dijit.form.HorizontalRuleLabels" labelStyle="font-style:monospace;font-size:.7em;margin:-1em 0px 0px -.35em;">
<li></li>
<li>1</li>
<li>2</li>
</ol>
</div>
<h1>horizontal, with buttons, disabled (to show styling):</h1>
<div dojoType="dijit.form.HorizontalSlider" name="horizontalH2"
onChange="dojo.byId('slider1input').value=arguments[0];"
value="10"
maximum="100"
minimum="0"
disabled="true"
showButtons="true"
intermediateChanges="true"
style="width:50%; height: 20px;"
id="sliderH2">
<ol dojoType="dijit.form.HorizontalRuleLabels" container="topDecoration" style="height:1.2em;font-size:75%;color:gray;" count="7" constraints="{pattern:'#.00%'}"></ol>
<div dojoType="dijit.form.HorizontalRule" container="topDecoration" count=7 style="height:5px;"></div>
<div dojoType="dijit.form.HorizontalRule" container="bottomDecoration" count=5 style="height:5px;"></div>
<ol dojoType="dijit.form.HorizontalRuleLabels" container="bottomDecoration" style="height:1em;font-size:75%;color:gray;">
<li>lowest</li>
<li>normal</li>
<li>highest</li>
</ol>
</div>
</body>
</html>

File Metadata

Mime Type
text/html
Expires
Sun, Apr 6, 17:49 (2 w, 1 d ago)
Storage Engine
blob
Storage Format
Raw Data
Storage Handle
23020
Default Alt Text
test_Slider.html (6 KB)

Event Timeline