dijit
Version:
Dijit provides a complete collection of user interface controls based on Dojo, giving you the power to create web applications that are highly optimized for usability, performance, internationalization, accessibility, but above all deliver an incredible u
200 lines (180 loc) • 8.95 kB
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>