Blame | Last modification | View Log | RSS feed
<!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 widgetsdojo.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>