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
315 lines (284 loc) • 13 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" data-dojo-config="parseOnLoad: true"></script>
<script type="text/javascript">
var registry, dom;
require([
"doh/runner",
"dojo/dom",
"dojo/dom-construct",
"dojo/parser",
"dojo/ready",
"dijit/registry",
"dijit/tests/helpers",
"dijit/form/Button",
"dijit/form/HorizontalSlider",
"dijit/form/VerticalSlider",
"dijit/form/HorizontalRule",
"dijit/form/VerticalRule",
"dijit/form/HorizontalRuleLabels",
"dijit/form/VerticalRuleLabels",
"dojo/domReady!"
], function(doh, dm, domConstruct, parser, ready, rgstry, helpers,
Button, HorizontalSlider, VerticalSlider, HorizontalRule, VerticalRule, HorizontalRuleLabels, VerticalRuleLabels){
// Add test=true to the URL to run unit tests.
var test = /mode=test/i.test(window.location.href);
registry = rgstry;
dom = dm;
// programatic vertical slider and labels
var programaticExample = function(noSrcNodeRef){
var node;
if (!noSrcNodeRef){ node = dom.byId("programaticSlider"); }
// or var node = dojo.body().appendChild(document.createElement('div'));
// setup the rules
var sliderRules = new VerticalRule({
count:11,
style:{width:"5px"}
}, noSrcNodeRef ? undefined : domConstruct.create("div", {}, node));
// setup RuleLabels
var sliderRuleLabels = new VerticalRuleLabels({
labels: ["low", "mid", "high"]
}, noSrcNodeRef ? undefined : domConstruct.create("div", {}, node));
// and setup the slider
var sliderProps = {
value:1400,
name:"programaticSlider",
"aria-label":"programatic slider",
slideDuration:0,
onChange:function(val){ dom.byId('sliderProgInput').value=val; },
style:{height:"165px"},
minimum:1000,
maximum:3000,
discreteValues:11,
intermediateChanges:"true",
showButtons:"true"
};
if(noSrcNodeRef){
// give no-srcNodeRef test instance distinguishable name/id
sliderProps.id = sliderProps.name = "programmaticSliderNoSrc";
}
var theSlider = new VerticalSlider(sliderProps, node);
if(noSrcNodeRef){
node = theSlider.containerNode;
// call placeAt if we're not using srcNodeRef
theSlider.placeAt("form1");
sliderRules.placeAt(node);
sliderRuleLabels.placeAt(node);
}
// and start them all
theSlider.startup();
sliderRules.startup();
sliderRuleLabels.startup();
};
// test programmatic VerticalSlider/Rule/RuleDef with srcNodeRef
ready(programaticExample);
// test programmatic VerticalSlider/Rule/RuleDef WITHOUT srcNodeRef
ready(function(){
try{
programaticExample(true);
}catch(e){
console.error("BUG #13815", e);
}
if(test){
// aria role and properties tests.
doh.register("aria",
function testit(){
var slider = registry.byId("slider1");
doh.is("slider", slider.focusNode.getAttribute("role"), "aria role (slider)");
doh.is(slider.minimum, slider.focusNode.getAttribute("aria-valuemin"), "aria-valuemin");
doh.is(slider.maximum, slider.focusNode.getAttribute("aria-valuemax"), "aria-valuemax");
doh.is(slider.get('value'), slider.focusNode.getAttribute("aria-valuenow"), "initial aria-valuenow");
var half = (slider.maximum + slider.minimum) >> 1;
slider.set('value', half, true);
doh.is(half, slider.focusNode.getAttribute("aria-valuenow"), "half aria-valuenow");
}
);
doh.register("API", [
function increment(){
var slider = registry.byId("slider1");
var v = slider.get('value');
slider._bumpValue(1, true);
var v2 = slider.get('value');
doh.t(v2 > v, "increment");
slider.maximum = v2;
slider._bumpValue(1, true);
var v3 = slider.get('value');
doh.is(v2, v3, "no increment");
},
function decrement(){
var slider = registry.byId("slider1");
var v = slider.get('value');
slider._bumpValue(-1, true);
var v2 = slider.get('value');
doh.t(v2 < v, "decrement");
slider.minimum = v2;
slider._bumpValue(-1, true);
var v3 = slider.get('value');
doh.is(v2, v3, "no decrement");
},
function locked(){
var slider = registry.byId("slider1");
var v = slider.get('value');
slider.maximum = slider.minimum;
slider._bumpValue(-1, true);
var v2 = slider.get('value');
doh.is(v, v2, "no decrement");
slider._bumpValue(1, true);
var v2 = slider.get('value');
doh.is(v, v2, "no increment");
this.slideDuration = 0;
slider.set('value', v, true);
slider.progressBar.style.width = "0%";
slider.remainingBar.style.width = "100%";
}
]);
doh.run();
}
});
});
</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">
<br>initial value=10, min=0, max=100, pageIncrement=100, onChange event triggers input box value change immediately<br>
<strong>Horizontal Slider Example</strong>
<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>
<br>
<br>initial value=10, min=0, max=100, onChange event triggers input box value change when you mouse up or tab away<br>
<strong>Vertical Slider Example</strong>
<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"/>
<h1>Fancy HTML labels (no slide animation):</h1>
<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>
<p></p><h1>Standalone ruler example:</h1><p></p>
<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>
<h1>horizontal, with buttons, disabled (to show styling):</h1>
<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>
<h2>Completely Programatic VerticalSlider and VerticalRule</h2>
<h3>min:1000, max:3000, 11 discrete values, no animation</h3>
<div id="programaticSlider"></div>
<label for="sliderProgInput">Programmatic Value:</label><input readonly id="sliderProgInput" size="5" value="1400"/>
<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>
</body>
</html>