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.
199 lines
8.7 KiB
199 lines
8.7 KiB
<!DOCTYPE html> |
|
<html lang="en"> |
|
<head> |
|
<meta http-equiv="Content-type" content="text/html; charset=utf-8"> |
|
<title>Dojo Slider Widget Demo</title> |
|
|
|
<style type="text/css"> |
|
@import "../../themes/claro/document.css"; |
|
@import "../css/dijitTests.css"; |
|
@import "../../../util/doh/robot/robot.css"; |
|
#slider2 .dijitButtonNode { |
|
width:12px; |
|
height:12px; |
|
border: none; |
|
font-size:11px; |
|
padding:0; |
|
} |
|
</style> |
|
|
|
<script type="text/javascript" src="../boilerplate.js"></script> |
|
|
|
<script type="text/javascript"> |
|
var registry, dom; |
|
require([ |
|
"dojo/dom", |
|
"dojo/parser", |
|
"dijit/registry", |
|
|
|
// used by parser |
|
"dijit/form/Button", |
|
"dijit/form/HorizontalSlider", |
|
"dijit/form/VerticalSlider", |
|
"dijit/form/HorizontalRule", |
|
"dijit/form/VerticalRule", |
|
"dijit/form/HorizontalRuleLabels", |
|
"dijit/form/VerticalRuleLabels", |
|
"dojo/domReady!" |
|
], function(dm, parser, rgstry){ |
|
// used by event handlers |
|
dom = dm; |
|
registry = rgstry; |
|
|
|
parser.parse(); |
|
}); |
|
</script> |
|
</head> |
|
|
|
<body role="main"> |
|
<h1 class="testTitle">Slider</h1> |
|
Also try using the arrow keys, buttons, or clicking on the progress bar to move the slider. |
|
<br> |
|
<!-- to test form submission, you'll need to create an action handler similar to |
|
http://www.utexas.edu/teamweb/cgi-bin/generic.cgi --> |
|
<form id="form1" action="" name="example" method="post"> |
|
|
|
<h2>Horizontal Slider Example</h2> |
|
initial value=10, min=0, max=100, pageIncrement=100, onChange event triggers input box value change immediately<br> |
|
<div id="slider1" data-dojo-type="dijit/form/HorizontalSlider" aria-label="slider 1" data-dojo-props='name:"horizontal1", |
|
onChange:function(val){ dom.byId("slider1input").value=dojo.number.format(val/100,{places:1,pattern:"#%"}); }, |
|
value:10, |
|
maximum:100, |
|
minimum:0, |
|
pageIncrement:100, |
|
showButtons:true, |
|
intermediateChanges:true, |
|
slideDuration:500, |
|
style:{width:"50%", height:"20px"} |
|
'> |
|
<ol data-dojo-type="dijit/form/HorizontalRuleLabels" data-dojo-props='container:"topDecoration", style:{height:"1.2em",fontSize:"75%"}, count:6, numericMargin:1'></ol> |
|
<div data-dojo-type="dijit/form/HorizontalRule" data-dojo-props='container:"topDecoration", count:6, style:{height:"5px"}'></div> |
|
<div data-dojo-type="dijit/form/HorizontalRule" data-dojo-props='container:"bottomDecoration", count:5, style:{height:"5px"}'></div> |
|
<ol data-dojo-type="dijit/form/HorizontalRuleLabels" data-dojo-props='container:"bottomDecoration", style:{height:"1em",fontSize:"75%"}'> |
|
<li>lowest</li> |
|
<li>normal</li> |
|
<li>highest</li> |
|
</ol> |
|
</div> |
|
|
|
<label for="slider1input">Slider1 Value:</label><input readonly id="slider1input" size="4" value="10.0%"/> |
|
<br> |
|
<button id="disableButton" data-dojo-type="dijit/form/Button" data-dojo-props='onClick:function(){ registry.byId("slider1").set("disabled", true);registry.byId("disableButton").set("disabled",true);registry.byId("enableButton").set("disabled",false); }'>Disable previous slider</button> |
|
<button id="enableButton" data-dojo-type="dijit/form/Button" data-dojo-props='onClick:function(){ registry.byId("slider1").set("disabled",false);registry.byId("disableButton").set("disabled",false);registry.byId("enableButton").set("disabled", true); }, disabled:true'>Enable previous slider</button> |
|
|
|
<h2>Vertical Slider Example</h2> |
|
initial value=10, min=0, max=100, onChange event triggers input box value change when you mouse up or tab away<br> |
|
<div id="slider2" data-dojo-type="dijit/form/VerticalSlider" data-dojo-props='name:"vertical1", |
|
onChange:function(val){ dom.byId("slider2input").value = val; }, |
|
value:10, |
|
maximum:100, |
|
minimum:0, |
|
discreteValues:11, |
|
"aria-label":"slider 2", |
|
style:{height:"300px"} |
|
'> |
|
<ol data-dojo-type="dijit/form/VerticalRuleLabels" data-dojo-props='container:"leftDecoration", style:{width:"2em"}, labelStyle: document.documentElement.dir=="rtl" ? "left:3px;" : "right:3px;"'> |
|
<li>0</li> |
|
<li>100</li> |
|
</ol> |
|
<div data-dojo-type="dijit/form/VerticalRule" data-dojo-props='container:"leftDecoration", count:11, style:{width:"5px"}, ruleStyle:"border-color: #888"'></div> |
|
<div data-dojo-type="dijit/form/VerticalRule" data-dojo-props='container:"rightDecoration", count:11, style:{width:"5px"}, ruleStyle:"border-color: #888"'></div> |
|
<ol data-dojo-type="dijit/form/VerticalRuleLabels" data-dojo-props='container:"rightDecoration", style:{width:"2em"}, count:6, numericMargin:1, maximum:100, constraints:{pattern:"#"}'></ol> |
|
</div> |
|
<label for="slider2input">Slider2 Value:</label><input readonly id="slider2input" size="3" value="10"/> |
|
|
|
<h2>Fancy HTML labels (no slide animation):</h2> |
|
<div id="slider3" data-dojo-type="dijit/form/HorizontalSlider" aria-label="slider 3" data-dojo-props='name:"horizontal2", |
|
title:"Fancy HTML Labels", |
|
minimum:1, |
|
value:2, |
|
maximum:3, |
|
discreteValues:3, |
|
showButtons:false, |
|
intermediateChanges:true, |
|
slideDuration:0, |
|
style:"width:300px; height: 40px;" |
|
'> |
|
<div data-dojo-type="dijit/form/HorizontalRule" data-dojo-props='container:"bottomDecoration", count:3, style:{height:"5px"}'></div> |
|
<ol data-dojo-type="dijit/form/HorizontalRuleLabels" data-dojo-props='container:"bottomDecoration", style:{height:"1em", fontSize:"75%"}'> |
|
<li><img width=10 height=10 alt="small" src="../images/note.gif"/><br><span style="font-size: small">small</span></li> |
|
<li><img width=15 height=15 alt="medium" src="../images/note.gif"/><br><span style="font-size: medium">medium</span></li> |
|
<li><img width=20 height=20 alt="large" src="../images/note.gif"/><br><span style="font-size: large">large</span></li> |
|
</ol> |
|
</div> |
|
<br><br> |
|
|
|
<h2>Standalone ruler example:</h2> |
|
|
|
<div style="width:2in;border-top:1px solid black;"> |
|
<div data-dojo-type="dijit/form/HorizontalRule" data-dojo-props='count:17, style:{height:".4em"}'></div> |
|
<div data-dojo-type="dijit/form/HorizontalRule" data-dojo-props='count:9, style:{height:".4em"}'></div> |
|
<div data-dojo-type="dijit/form/HorizontalRule" data-dojo-props='count:5, style:{height:".4em"}'></div> |
|
<div data-dojo-type="dijit/form/HorizontalRule" data-dojo-props='count:3, style:{height:".4em"}'></div> |
|
<ol data-dojo-type="dijit/form/HorizontalRuleLabels" data-dojo-props='labelStyle:"font-style:monospace;fontSize:.7em;margin:-1em 0px 0px -.35em;"'> |
|
<li></li> |
|
<li>1</li> |
|
<li>2</li> |
|
</ol> |
|
</div> |
|
|
|
<h2>Horizontal, with buttons, disabled (to show styling):</h2> |
|
|
|
<div id="sliderH2" aria-label="horizontal slider 2" data-dojo-type="dijit/form/HorizontalSlider" data-dojo-props='name:"horizontalH2", |
|
onChange:function(val){ dom.byId("slider1input").value = val; }, |
|
value:10, |
|
maximum:100, |
|
minimum:0, |
|
disabled:true, |
|
showButtons:true, |
|
intermediateChanges:true, |
|
style:{width:"50%", height:"20px"} |
|
'> |
|
<ol data-dojo-type="dijit/form/HorizontalRuleLabels" data-dojo-props='container:"topDecoration", style:{height:"1.2em", fontSize:"75%"}, count:7, constraints:{pattern:"#.00%"}'></ol> |
|
<div data-dojo-type="dijit/form/HorizontalRule" data-dojo-props='container:"topDecoration", count:7, style:"height:5px;"'></div> |
|
<div data-dojo-type="dijit/form/HorizontalRule" data-dojo-props='container:"bottomDecoration", count:5, style:"height:5px;"'></div> |
|
<ol data-dojo-type="dijit/form/HorizontalRuleLabels" data-dojo-props='container:"bottomDecoration", style:{height:"1em", fontSize:"75%"}'> |
|
<li>lowest</li> |
|
<li>normal</li> |
|
<li>highest</li> |
|
</ol> |
|
</div> |
|
|
|
|
|
<script> |
|
// so robot can get to it easily |
|
document.displayData=function(){ |
|
var f = document.getElementById("form1"); |
|
var s = ""; |
|
for(var i = 0; i < f.elements.length; i++){ |
|
var elem = f.elements[i]; |
|
if(elem.nodeName.toLowerCase() == "button" || elem.type=="submit" || elem.type=="button") { continue; } |
|
s += elem.name + ": " + elem.value + "\n"; |
|
} |
|
return s; |
|
} |
|
</script> |
|
|
|
<div> |
|
<button name="button" onclick="alert(displayData()); return false;">view data</button> |
|
<input type="submit" name="submit" /> |
|
</div> |
|
|
|
</form> |
|
|
|
<h2>Fractional Slider Example</h2> |
|
initial value=0.28, min=0, max=2, onChange event triggers input box value change when you mouse up or tab away<br><br> |
|
<div id="fractionalSlider" data-dojo-type="dijit/form/HorizontalSlider" data-dojo-props=' |
|
onChange:function(val){ dom.byId("fractionalSliderInput").value = val; }, |
|
value:0.28, |
|
maximum:2, |
|
minimum:0, |
|
discreteValues:101, |
|
"aria-label":"fractional slider", |
|
style:{width:"357px"} |
|
'> |
|
<div data-dojo-type="dijit/form/HorizontalRule" data-dojo-props='container:"bottomDecoration", count:101, style:{height:"5px"}'></div> |
|
</div> |
|
<label for="fractionalSliderInput">Fractional Slider Value:</label><input readonly id="fractionalSliderInput" size="10" value="0.28"/> |
|
</body> |
|
</html>
|
|
|