New file |
0,0 → 1,136 |
<!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> |