| 1 | <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> |
|---|
| 2 | <html lang="en"> |
|---|
| 3 | <head> |
|---|
| 4 | <title>Dojox RangeSlider Test</title> |
|---|
| 5 | <style type="text/css"> |
|---|
| 6 | @import "../../../dojo/resources/dojo.css"; |
|---|
| 7 | @import "../../../dijit/themes/claro/document.css"; |
|---|
| 8 | @import "../../../dijit/themes/claro/claro.css"; |
|---|
| 9 | @import "../../../dijit/tests/css/dijitTests.css"; |
|---|
| 10 | @import "../resources/RangeSlider.css"; |
|---|
| 11 | </style> |
|---|
| 12 | |
|---|
| 13 | <style> |
|---|
| 14 | /* showing a big yellow bar */ |
|---|
| 15 | #hrCustomSlider .dijitSliderProgressBar { |
|---|
| 16 | background:yellow !important; |
|---|
| 17 | height:12px; |
|---|
| 18 | overflow:visible; |
|---|
| 19 | margin-top: -5px; |
|---|
| 20 | } |
|---|
| 21 | |
|---|
| 22 | </style> |
|---|
| 23 | |
|---|
| 24 | <script type="text/javascript" src="../../../dojo/dojo.js" data-dojo-config="isDebug:true, parseOnLoad: true"></script> |
|---|
| 25 | <script type="text/javascript"> |
|---|
| 26 | dojo.require("dojo.parser"); |
|---|
| 27 | dojo.require("dojox.form.RangeSlider"); |
|---|
| 28 | dojo.require("dijit.form.HorizontalRule"); |
|---|
| 29 | dojo.require("dijit.form.HorizontalRuleLabels"); |
|---|
| 30 | dojo.require("dijit.form.VerticalRule"); |
|---|
| 31 | dojo.require("dijit.form.VerticalRuleLabels"); |
|---|
| 32 | |
|---|
| 33 | var horizOnChange = function(){ |
|---|
| 34 | |
|---|
| 35 | dojo.byId('minValue').value = dojo.number.format(arguments[0][0]/100, { places:1, pattern:'#%' }); |
|---|
| 36 | dojo.byId('maxValue').value = dojo.number.format(arguments[0][1]/100, { places:1, pattern:'#%' }); |
|---|
| 37 | |
|---|
| 38 | } |
|---|
| 39 | |
|---|
| 40 | var vertOnChange = function(){ |
|---|
| 41 | |
|---|
| 42 | console.log(arguments); |
|---|
| 43 | dojo.byId('vMinValue').value = dojo.number.format(arguments[0][1],{places:1,pattern:'#'}); |
|---|
| 44 | dojo.byId('vMaxValue').value = dojo.number.format(arguments[0][0],{places:1,pattern:'#'}); |
|---|
| 45 | |
|---|
| 46 | } |
|---|
| 47 | |
|---|
| 48 | </script> |
|---|
| 49 | <script type="text/javascript" src="../../../dijit/tests/_testCommon.js"></script> |
|---|
| 50 | </head> |
|---|
| 51 | <body class="claro" role="main"> |
|---|
| 52 | <h1 class="testTitle">Dojox RangeSlider test</h1> |
|---|
| 53 | Just try to drag the slider endpoints and the bar in the middle. You can also use the bumper and the arrows on the left and right to manipulate the range. It's also possible to tab through the slider parts and move the handlers or bar with left/right/up/down-button. |
|---|
| 54 | <h2>Horizontal slider</h2> |
|---|
| 55 | <center> |
|---|
| 56 | <div |
|---|
| 57 | id="hrSlider" |
|---|
| 58 | discreteValues="11" |
|---|
| 59 | onChange="horizOnChange" |
|---|
| 60 | style="width:500px;" |
|---|
| 61 | value="80,20" |
|---|
| 62 | intermediateChanges="true" |
|---|
| 63 | dojoType="dojox.form.HorizontalRangeSlider"> |
|---|
| 64 | <ol dojoType="dijit.form.HorizontalRuleLabels" container="topDecoration" style="height:1.2em;font-size:75%;color:gray;" count="7" constraints="{pattern:'#.00%'}"></ol> |
|---|
| 65 | <div dojoType="dijit.form.HorizontalRule" container="topDecoration" count=7 style="height:10px;margin-bottom:-5px;"></div> |
|---|
| 66 | </div> |
|---|
| 67 | </center> |
|---|
| 68 | <label for="minValue">Horizontal Slider Min Value:</label><input readonly id="minValue" size="10" value="20.0%"/><br/> |
|---|
| 69 | <label for="maxValue">Horizontal Slider Max Value:</label><input readonly id="maxValue" size="10" value="80.0%"/><br/> |
|---|
| 70 | <button id="disableButton" dojoType="dijit.form.Button" onClick="dijit.byId('hrSlider').set('disabled', true);dijit.byId('disableButton').set('disabled',true);dijit.byId('enableButton').set('disabled',false);">Disable previous slider</button> |
|---|
| 71 | <button id="enableButton" dojoType="dijit.form.Button" onClick="dijit.byId('hrSlider').set('disabled', false);dijit.byId('disableButton').set('disabled',false);dijit.byId('enableButton').set('disabled', true);" disabled>Enable previous slider</button> |
|---|
| 72 | |
|---|
| 73 | <h2>A customized horizontal slider</h2> |
|---|
| 74 | <div |
|---|
| 75 | id="hrCustomSlider" |
|---|
| 76 | discreteValues="22" |
|---|
| 77 | dojoType="dojox.form.HorizontalRangeSlider" |
|---|
| 78 | showButtons="false" |
|---|
| 79 | ></div> |
|---|
| 80 | <button id="getValues" dojoType="dijit.form.Button" onClick="console.dir(dijit.byId('hrCustomSlider').get('value'));">Get Value</button> |
|---|
| 81 | |
|---|
| 82 | <h2>Vertical slider</h2> |
|---|
| 83 | <div id="vrSlider" |
|---|
| 84 | onChange="vertOnChange" |
|---|
| 85 | style="height:300px;" |
|---|
| 86 | value="10,90" |
|---|
| 87 | dojoType="dojox.form.VerticalRangeSlider"> |
|---|
| 88 | <ol dojoType="dijit.form.VerticalRuleLabels" container="leftDecoration" style="width:2em;color:gray;" labelStyle="right:0px;"> |
|---|
| 89 | <li>0</li> |
|---|
| 90 | <li>100</li> |
|---|
| 91 | </ol> |
|---|
| 92 | <div dojoType="dijit.form.VerticalRule" container="leftDecoration" count=11 style="width:5px;" ruleStyle="border-color:gray;"></div> |
|---|
| 93 | <div dojoType="dijit.form.VerticalRule" container="rightDecoration" count=11 style="width:5px;" ruleStyle="border-color:gray;"></div> |
|---|
| 94 | <ol dojoType="dijit.form.VerticalRuleLabels" data-dojo-props='container:"rightDecoration", style:{width:"2em"}, count:6, numericMargin:1, minimum:0, maximum:100, constraints:{pattern:"#"}'></ol> |
|---|
| 95 | </div> |
|---|
| 96 | <p> |
|---|
| 97 | <label for="vMaxValue">Vertical Slider Max Value:</label><input readonly id="vMaxValue" size="10" value="90.0"/><br/> |
|---|
| 98 | <label for="vMinValue">Vertical Slider Min Value:</label><input readonly id="vMinValue" size="10" value="10.0"/><br/> |
|---|
| 99 | </p> |
|---|
| 100 | </body> |
|---|
| 101 | </html> |
|---|
