Updated
This commit is contained in:
Éric Lemoine
220
master/examples/test_Slider.html
Normal file
220
master/examples/test_Slider.html
Normal file
@@ -0,0 +1,220 @@
|
||||
<!DOCTYPE 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";
|
||||
@import "../../../util/doh/robot/robot.css";
|
||||
#slider2 .dijitButtonNode {
|
||||
width:12px;
|
||||
height:12px;
|
||||
border: none;
|
||||
font-size:11px;
|
||||
padding:0;
|
||||
}
|
||||
</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="isDebug: true, parseOnLoad: true"></script>
|
||||
|
||||
<!-- only needed for alternate theme testing: -->
|
||||
<script type="text/javascript" src="../_testCommon.js"></script>
|
||||
|
||||
<script type="text/javascript">
|
||||
dojo.require("dijit.dijit"); // optimize: load dijit layer
|
||||
|
||||
dojo.require("dijit.form.HorizontalSlider");
|
||||
dojo.require("dijit.form.VerticalSlider");
|
||||
dojo.require("dijit.form.HorizontalRule");
|
||||
dojo.require("dijit.form.VerticalRule");
|
||||
dojo.require("dijit.form.HorizontalRuleLabels");
|
||||
dojo.require("dijit.form.VerticalRuleLabels");
|
||||
|
||||
dojo.require("dijit.form.Button");
|
||||
dojo.require("dojo.parser"); // scan page for widgets
|
||||
|
||||
// programatic vertical slider and labels
|
||||
var programaticExample = function(){
|
||||
|
||||
var node = dojo.byId("programaticSlider");
|
||||
// or var node = dojo.body().appendChild(document.createElement('div'));
|
||||
|
||||
// our rules are to be children of the slider
|
||||
var rulesNode = document.createElement('div');
|
||||
node.appendChild(rulesNode);
|
||||
|
||||
// setup the rules
|
||||
var sliderRules = new dijit.form.VerticalRule({
|
||||
count:11,
|
||||
style:{width:"5px"}
|
||||
},rulesNode);
|
||||
|
||||
// and setup the slider
|
||||
var theSlider = new dijit.form.VerticalSlider({
|
||||
value:1400,
|
||||
name:"programaticSlider",
|
||||
slideDuration:0,
|
||||
onChange:function(val){ dojo.byId('sliderProgInput').value=val; },
|
||||
style:{height:"165px"},
|
||||
minimum:1000,
|
||||
maximum:3000,
|
||||
discreteValues:11,
|
||||
intermediateChanges:"true",
|
||||
showButtons:"true"
|
||||
},node);
|
||||
|
||||
// and start them both
|
||||
theSlider.startup();
|
||||
sliderRules.startup();
|
||||
|
||||
};
|
||||
dojo.ready(programaticExample);
|
||||
</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</strong>
|
||||
<div id="slider1" data-dojo-type="dijit.form.HorizontalSlider" data-dojo-props='name:"horizontal1",
|
||||
onChange:function(val){ dojo.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>
|
||||
|
||||
Slider1 Value:<input readonly id="slider1input" size="4" value="10.0%"/>
|
||||
<br>
|
||||
<button id="disableButton" data-dojo-type="dijit.form.Button" data-dojo-props='onClick:function(){ dijit.byId("slider1").set("disabled", true);dijit.byId("disableButton").set("disabled",true);dijit.byId("enableButton").set("disabled",false); }'>Disable previous slider</button>
|
||||
<button id="enableButton" data-dojo-type="dijit.form.Button" data-dojo-props='onClick:function(){ dijit.byId("slider1").set("disabled",false);dijit.byId("disableButton").set("disabled",false);dijit.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){ dojo.byId("slider2input").value = val; },
|
||||
value:10,
|
||||
maximum:100,
|
||||
minimum:0,
|
||||
discreteValues:11,
|
||||
style:{height:"300px"}
|
||||
'>
|
||||
<ol data-dojo-type="dijit.form.VerticalRuleLabels" data-dojo-props='container:"leftDecoration", style:{width:"2em"}, labelStyle:"right:0px;"'>
|
||||
<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>
|
||||
Slider2 Value:<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" 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 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 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" data-dojo-type="dijit.form.HorizontalSlider" data-dojo-props='name:"horizontalH2",
|
||||
onChange:function(val){ dojo.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>
|
||||
Programmatic Value:<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>
|
||||
Reference in New Issue
Block a user