diff options
Diffstat (limited to 'includes/js/dijit/tests/form/test_Slider.html')
| -rw-r--r-- | includes/js/dijit/tests/form/test_Slider.html | 208 |
1 files changed, 208 insertions, 0 deletions
diff --git a/includes/js/dijit/tests/form/test_Slider.html b/includes/js/dijit/tests/form/test_Slider.html new file mode 100644 index 0000000..f1d0442 --- /dev/null +++ b/includes/js/dijit/tests/form/test_Slider.html @@ -0,0 +1,208 @@ +<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" + "http://www.w3.org/TR/html4/strict.dtd"> +<html> + <head> + <title>Dojo Slider Widget Demo</title> + + <style type="text/css"> + @import "../../../dojo/resources/dojo.css"; + @import "../css/dijitTests.css"; + #slider2 .dijitButtonNode { + width:12px; + height:12px; + border: none; + font-size:11px; + padding:0px; + } + </style> + + <script type="text/javascript" src="../../../dojo/dojo.js" + djConfig="isDebug: true, parseOnLoad: true, extraLocale: ['de-de', 'en-us']"></script> + <script type="text/javascript" src="../_testCommon.js"></script> + + <script type="text/javascript"> + dojo.require("dijit.form.Slider"); + 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, + onChange: function(){ + console.log(arguments); + }, + 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.addOnLoad(programaticExample); + + dojo.addOnLoad(function(){ + dijit.byId("sliderH2").setAttribute('disabled',true); + }); + </script> + </head> + + <body> + <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> + + <div dojoType="dijit.form.HorizontalSlider" name="horizontal1" + onChange="dojo.byId('slider1input').value=dojo.number.format(arguments[0]/100,{places:1,pattern:'#%'});" + value="10" + maximum="100" + minimum="0" + pageIncrement="100" + showButtons="false" + intermediateChanges="true" + style="width:50%; height: 20px;" + id="slider1"> + <ol dojoType="dijit.form.HorizontalRuleLabels" container="topDecoration" style="height:1.2em;font-size:75%;color:gray;" count="6" numericMargin="1"></ol> + <div dojoType="dijit.form.HorizontalRule" container="topDecoration" count=6 style="height:5px;"></div> + <div dojoType="dijit.form.HorizontalRule" container="bottomDecoration" count=5 style="height:5px;"></div> + <ol dojoType="dijit.form.HorizontalRuleLabels" container="bottomDecoration" style="height:1em;font-size:75%;color:gray;"> + <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" dojoType="dijit.form.Button" onClick="dijit.byId('slider1').setAttribute('disabled', true);dijit.byId('disableButton').setAttribute('disabled',true);dijit.byId('enableButton').setAttribute('disabled',false);">Disable previous slider</button> + <button id="enableButton" dojoType="dijit.form.Button" onClick="dijit.byId('slider1').setAttribute('disabled',false);dijit.byId('disableButton').setAttribute('disabled',false);dijit.byId('enableButton').setAttribute('disabled', true);" disabled>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> + <div dojoType="dijit.form.VerticalSlider" name="vertical1" + onChange="dojo.byId('slider2input').value=arguments[0];" + value="10" + maximum="100" + minimum="0" + discreteValues="11" + style="height:300px;" + id="slider2"> + <ol dojoType="dijit.form.VerticalRuleLabels" container="leftDecoration" style="width:2em;color:gray;" labelStyle="right:0px;"> + <li>0</li> + <li>100</li> + </ol> + <div dojoType="dijit.form.VerticalRule" container="leftDecoration" count=11 style="width:5px;" ruleStyle="border-color:gray;"></div> + <div dojoType="dijit.form.VerticalRule" container="rightDecoration" count=11 style="width:5px;" ruleStyle="border-color:gray;"></div> + <ol dojoType="dijit.form.VerticalRuleLabels" container="rightDecoration" style="width:2em;color:gray;" 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 dojoType="dijit.form.HorizontalSlider" name="horizontal2" + minimum="1" + value="2" + maximum="3" + discreteValues="3" + showButtons="false" + intermediateChanges="true" + slideDuration="0" + style="width:300px; height: 40px;" + id="slider3"> + <div dojoType="dijit.form.HorizontalRule" container="bottomDecoration" count=3 style="height:5px;"></div> + <ol dojoType="dijit.form.HorizontalRuleLabels" container="bottomDecoration" style="height:1em;font-size:75%;color:gray;"> + <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 dojoType="dijit.form.HorizontalRule" count=17 style="height:.4em;"></div> + <div dojoType="dijit.form.HorizontalRule" count=9 style="height:.4em;"></div> + <div dojoType="dijit.form.HorizontalRule" count=5 style="height:.4em;"></div> + <div dojoType="dijit.form.HorizontalRule" count=3 style="height:.4em;"></div> + <ol dojoType="dijit.form.HorizontalRuleLabels" labelStyle="font-style:monospace;font-size:.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 dojoType="dijit.form.HorizontalSlider" name="horizontalH2" + onChange="dojo.byId('slider1input').value=arguments[0];" + value="10" + maximum="100" + minimum="0" + disabled="true" + showButtons="true" + intermediateChanges="true" + style="width:50%; height: 20px;" + id="sliderH2"> + <ol dojoType="dijit.form.HorizontalRuleLabels" container="topDecoration" style="height:1.2em;font-size:75%;color:gray;" count="7" constraints="{pattern:'#.00%'}"></ol> + <div dojoType="dijit.form.HorizontalRule" container="topDecoration" count=7 style="height:5px;"></div> + <div dojoType="dijit.form.HorizontalRule" container="bottomDecoration" count=5 style="height:5px;"></div> + <ol dojoType="dijit.form.HorizontalRuleLabels" container="bottomDecoration" style="height:1em;font-size:75%;color:gray;"> + <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> + function displayData() { + var f = document.getElementById("form1"); + var s = ""; + for (var i = 0; i < f.elements.length; i++) { + var elem = f.elements[i]; + if (elem.name == "button") { continue; } + s += elem.name + ": " + elem.value + "\n"; + } + alert(s); + } + </script> + + <div> + <button name="button" onclick="displayData(); return false;">view data</button> + <input type="submit" name="submit" /> + </div> + + </form> + </body> +</html> |