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
174 lines (156 loc) • 6.44 kB
HTML
<html>
<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";
</style>
<!-- required: the default dijit theme: -->
<link id="themeStyles" rel="stylesheet" href="../../../../dijit/themes/claro/claro.css"/>
<!-- required: dojo.js -->
<script type="text/javascript" src="../../../../dojo/dojo.js"
data-dojo-config="async: true, isDebug: true, parseOnLoad: true, has: { 'dojo-bidi': true }"></script>
<script type="text/javascript">
require([
"doh/runner",
"dojo/dom",
"dojo/number",
"dojo/parser",
"dojo/query",
"dijit/registry",
"dijit/form/VerticalSlider",
"dijit/form/VerticalRule",
"dijit/form/VerticalRuleLabels",
"dojo/domReady!"
], function(doh, dom, number, parser, query, registry, VerticalSlider, VerticalRule, VerticalRuleLabels){
doh.register("setup", [
function parse(){
return parser.parse();
},
function programmatic(){
// programmatic vertical slider and labels
var node;
// setup the rules
var sliderRules = new VerticalRule({
count:11,
style:{width:"5px"}
});
// setup RuleLabels
var sliderRuleLabels = new VerticalRuleLabels({
labels: ["תגlowest!","low!", "mid!", "high!","תגhighest!"],
textDir: "ltr",
id: "rulerLabels2"
});
// and setup the slider
var sliderProps = {
value:1400,
name:"programmaticSlider",
slideDuration:0,
onChange:function(val){ dom.byId('sliderProgInput').value=val; },
style:{height:"165px"},
minimum:1000,
maximum:3000,
discreteValues:11,
intermediateChanges:"true",
showButtons:"true"
};
sliderProps.id = sliderProps.name = "programmaticSliderNoSrc";
var theSlider = new VerticalSlider(sliderProps, node);
node = theSlider.containerNode;
theSlider.placeAt("form1");
sliderRules.placeAt(node);
sliderRuleLabels.placeAt(node);
// and start them all
theSlider.startup();
sliderRules.startup();
sliderRuleLabels.startup();
//attach handler to Horizontal ruler
var slider1 = registry.byId("slider1");
slider1.watch("value", function(name, oldVal, newVal){
dom.byId("slider1input").value = number.format(newVal/100,{places:1,pattern:"#%"});
});
}
]);
doh.register("tests._BidiSupport.form.RulerLabelBidi", [
{
name: "Slider Bidi",
runTest: function(){
query(" > div",dom.byId('rulerLabels1')).forEach(function(node, index, arr){
doh.is("rtl", node.style.direction, "hoprizontal: label node had 'direction' style corresponding to 'textDir'");
});
registry.byId("rulerLabels2").set('textDir',"auto");
var verticalLabel = query("div.dijitRuleLabelContainerV")[0];
doh.is("rtl", verticalLabel.style.direction, "vertical: label node had 'direction' style corresponding to 'textDir'");
}
}
]);
doh.register("log", function(){
dom.byId('failures').innerHTML = doh._failureCount;
dom.byId('errors').innerHTML = doh._errorCount;
});
doh.run();
});
</script>
</head>
<body class="claro">
<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, "rtl" base text direction</strong>
<br>
<div id="slider1" data-dojo-type="dijit/form/HorizontalSlider" data-dojo-props='name:"horizontal1",
value:10,
maximum:100,
minimum:0,
pageIncrement:100,
showButtons:true,
intermediateChanges:true,
slideDuration:500,
style:{width:"50%", height:"20px"}
' >
<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 id="rulerLabels1" data-dojo-type="dijit/form/HorizontalRuleLabels" data-dojo-props='textDir:"rtl", container:"bottomDecoration", style:{height:"1em",fontSize:"75%"}'>
<li>תגlowest!</li>
<li>תגnormal!</li>
<li>תגhighest!</li>
</ol>
</div>
Slider1 Value:<input readonly id="slider1input" size="4" value="10.0%"/>
<br>
<br>initial value=10, min=0, max=100, onChange event triggers input box value change when you mouse up or tab away<br>
<h1>Fancy HTML labels (no slide animation), "rtl" base text direction:</h1>
<div id="slider3" data-dojo-type="dijit/form/HorizontalSlider" 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: 30px;"
'>
<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='textDir:"rtl", container:"bottomDecoration", style:{height:"1em", fontSize:"75%"}'>
<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: small">תגmedium!</span></li>
<li><img width=20 height=20 src="../../images/note.gif"/><br><span style="font-size: small">תגlarge!</span></li>
</ol>
</div>
<br><br>
<h2>Completely programmatic VerticalSlider and VerticalRule, "auto" base text direction</h2>
<h3>min:1000, max:3000, 11 discrete values, no animation</h3>
<div id="programmaticSlider"></div>
Programmatic Value:<input readonly id="sliderProgInput" size="5" value="1400"/>
</form>
<br>Errors: <span id="errors">?</span>
<br>Failures: <span id="failures">?</span>
</body>
</html>