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, 0 insertions, 208 deletions
diff --git a/includes/js/dijit/tests/form/test_Slider.html b/includes/js/dijit/tests/form/test_Slider.html deleted file mode 100644 index f1d0442..0000000 --- a/includes/js/dijit/tests/form/test_Slider.html +++ /dev/null @@ -1,208 +0,0 @@ -<!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> |