Slider没有相对应的 HTML 控件，是一个相对独立的图形化的组件，可以通过鼠标、方向键来控制刻度尺的刻度。Dijit提供了水平和垂直滑动条。
Slider widget的使用却如同使用 CheckBox widget一样的方便。用户可以用鼠标点击、拖拉、中键滚动或者用键盘的上、下、左、右按键来选择Slider widget的刻度。
Silder 是由六个 widgets 组成，分别是：dijit.form.HorizontalSlider,dijit.form.VerticalSlider，dijit.form.HorizontalRule,dijit.form.VerticalRule，dijit.form.HorizontalRuleLabels,dijit.form.VerticalRuleLabels。
dijit.form.HorizontalSlider是水平方向的slider， dijit.form.VerticalSlider 是垂直方向的slider，提供可调节大小的标尺。其属性如下：
滑动条：HorizontalSlider 和 VerticalSlider 的属性
| 属性 | 属性类别 | 描述 |
| clickSelect | boolean true |
指定单击进度条是否可以更改刻度值 |
| discreteValues | integer Infinity |
在最大值与最小值之间可以设置的非连续值得个数 |
| intermediateChanges | Boolean false |
判断在调用 setValue 方法时是否直接触发 onChange 事件。如果为’ true ’，则每次执行 setValue 方法时都会触发 onChange 事件；如果为’ false ’，则 onChange 事件只有在自己被调用时才会被触发。 |
| maximum | integer 100 |
可设置的最大刻度值 |
| minimum | integer 0 |
可设置的最小刻度值 |
| pageIncrement | integer 2 |
点击键盘按键 pageup/pagedown时一次变化的刻度值 |
| showButtons | 指定是否在刻度条两端显示增加和减小的按钮 |
函数increment()表示以1单位为步长增加滑动条的值；函数decrement()表示以1单位为步长减少滑动条的值。
刻度尺：HorizontalRule 和 VerticalRule 的属性
| 描述 | ||
| container | Node containerNode |
设置刻度尺或文本标签相对于滑动条的位置，HorizontalSlider使用topDecoration或bottomDecoration，VerticalSlider使用leftDecoration或rightDecoration。 |
| count | Integer 3 |
指定生成刻度线的数量 |
| ruleStyle | String | 指定刻度线设置 CSS style |
dijit.form.HorizontalRuleLabels,dijit.form.VerticalRuleLabels 可以为标尺提供刻度标签，其属性如下：
标签：HorizontalRuleLabels 和 VerticalRuleLabels 的属性
| labels | Array [] |
文本标签的数组，存放要展现的标签值 |
| labelStyle | 指定为文本标签设置 CSS style | |
| minimum | Integer 0 |
在没有指定标签数组情况下，以这个值最左（下）端标签 |
| maximum | Integer 1 |
在没有指定标签数组情况下，以这个值最右（上）端标签 |
| getLabels | Function [] |
返回labels数组 |
| constraints | Object {pattern:"#%"} |
在没有指定标签数组情况下，使用这个对象包含的模式来生成数字标签 |
--声明方式：
<!DOCTYPEHTML> <htmllang="en"> <head> <Metacharset="utf-8"> <title>Demo:Slider</title> <linkrel="stylesheet"href="dijit/themes/claro/claro.css"> <scriptsrc="dojo/dojo.js"data-dojo-config="async:true,parSEOnLoad:true"></script> <script> //导入slider所需类 require(["dijit/form/VerticalSlider","dojo/parser"]); </script> </head> <bodyclass="claro"> <inputid="vertSlider"data-dojo-type="dijit/form/VerticalSlider" data-dojo-props="minimum:0,maximum:100,pageIncrement:20,value:20,intermediateChanges:true,style:'height:200px;'"> </body> </html>
--编程方式：
<!DOCTYPEHTML> <htmllang="en"> <head> <Metacharset="utf-8"> <title>Demo:Slider</title> <linkrel="stylesheet"href="dijit/themes/claro/claro.css"> <scriptsrc="dojo/dojo.js"data-dojo-config="async:true,parSEOnLoad:true"></script> <script> //导入slider所需类 require(["dijit/form/VerticalSlider"],function(VerticalSlider){ //创建垂直滑动条 varvertSlider=newVerticalSlider({ minimum:0,style:"height:200px;" },"vertSlider"); //Startupthewidget vertSlider.startup(); }); </script> </head> <bodyclass="claro"> <inputid="vertSlider"/> </body> </html>
输出：
<!DOCTYPEHTML> <htmllang="en"> <head> <Metacharset="utf-8"> <title>Demo:Slider</title> <linkrel="stylesheet"href="dijit/themes/claro/claro.css"> <scriptsrc="dojo/dojo.js"data-dojo-config="async:true,parSEOnLoad:true"></script> <script> //导入slider所需类 require(["dijit/form/HorizontalSlider","dijit/form/HorizontalRuleLabels","dijit/form/HorizontalRule","dojo/parser"]); </script> </head> <bodyclass="claro"> <divstyle="width:600px;margin-left:30px;"> <!--创建水平滑动条标签--> <oldata-dojo-type="dijit/form/HorizontalRuleLabels" data-dojo-props="container:'topDecoration',count:11,numericMargin:0" style="height:1.2em;font-weight:bold"> </ol> <!--创建水平滑动条刻度尺--> <divdata-dojo-type="dijit/form/HorizontalRule" data-dojo-props="container:'topDecoration',count:11" style="height:5px;margin:012px;"> </div> <!--创建水平滑动条，隐藏滑动条两端button--> <inputid="hslider"type="range"value="3" data-dojo-type="dijit/form/HorizontalSlider" data-dojo-props="minimum:0,maximum:10,showButtons:false,discreteValues:11"> <!--创建水平滑动条刻度尺--> <divdata-dojo-type="dijit/form/HorizontalRule" data-dojo-props="container:'bottomDecoration',count:5" style="height:5px;margin:012px;"> </div> <!--创建水平滑动条标签--> <oldata-dojo-type="dijit/form/HorizontalRuleLabels" data-dojo-props="container:'bottomDecoration'" style="height:1em;font-weight:bold;"> <li>lowest</li> <li></li> <li>lowest2</li> <li>normal</li> <li>highest</li> </ol> </div> </body> </html>
输出：
<!DOCTYPEHTML> <htmllang="en"> <head> <Metacharset="utf-8"> <title>Demo:Slider</title> <linkrel="stylesheet"href="dijit/themes/claro/claro.css"> <scriptsrc="dojo/dojo.js"data-dojo-config="async:true,parSEOnLoad:true"></script> </head> <bodyclass="claro"> <divid="vertSlider"></div> <script> require(["dijit/form/VerticalSlider","dijit/form/VerticalRuleLabels","dijit/form/VerticalRule","dojo/dom-construct","dojo/parser","dojo/dom","dojo/domReady!"],function(VerticalSlider,VerticalRuleLabels,VerticalRule,domConstruct,parser,dom){ //创建刻度尺 varrulesNode=domConstruct.create("div",{},dom.byId("vertSlider"),"first"); varsliderRules=newVerticalRule({container:"leftDecoration",style:"width:5px;"},rulesNode); //创建标签 varlabelsNode=domConstruct.create("div","first"); varsliderLabels=newVerticalRuleLabels({container:"rightDecoration",labelStyle:"font-style:italic;font-size:0.75em"},labelsNode); //创建垂直滑动条 varvertSlider=newVerticalSlider({minimum:0,style:"height:200px;"},"vertSlider"); //生成小部件 vertSlider.startup(); sliderRules.startup(); sliderLabels.startup(); }); </script> </body> </html>
输出：
--创建水平刻度：
<!DOCTYPEHTML> <htmllang="en"> <head> <Metacharset="utf-8"> <title>Demo:Slider</title> <linkrel="stylesheet"href="dijit/themes/claro/claro.css"> <scriptsrc="dojo/dojo.js"data-dojo-config="async:true,"dojo/parser"]); </script> </head> <bodyclass="claro"> <divdojoType="dijit.form.HorizontalSlider"name="caffeine" value="100" maximum="175" minimum="2" showButtons="false" style="margin:5px;width:300px;height:20px;"> <scripttype="dojo/method"event="onChange"args="newValue"> console.log(newValue); </script> <oldojoType="dijit.form.HorizontalRuleLabels"container="topDecoration" style="height:10px;font-size:75%;color:gray;"count="6"> </ol> <divdojoType="dijit.form.HorizontalRule"container="topDecoration" count=6style="height:5px;"> </div> <divdojoType="dijit.form.HorizontalRule"container="bottomDecoration" count=5style="height:5px;"> </div> <oldojoType="dijit.form.HorizontalRuleLabels"container="bottomDecoration" style="height:10px;font-size:75%;color:gray;"> <li>green<br>tea</li> <li>coffee</li> <li>red<br>bull</li> </ol> </div> </body> </html>
输出：
--创建垂直刻度
<!DOCTYPEHTML> <htmllang="en"> <head> <Metacharset="utf-8"> <title>Demo:Slider</title> <linkrel="stylesheet"href="dijit/themes/claro/claro.css"> <scriptsrc="dojo/dojo.js"data-dojo-config="async:true,"dojo/parser"]); </script> </head> <bodyclass="claro"> <divdojoType="dijit.form.VerticalSlider"name="caffeine" value="100" maximum="175" minimum="2" showButtons="false" style="margin:5px;width:75px;height:300px;"> <scripttype="dojo/method"event="onChange"args="newValue"> console.log(newValue); </script> <oldojoType="dijit.form.VerticalRuleLabels"container="leftDecoration" style="height:300px;width:25px;font-size:75%;color:gray;"count="6"> </ol> <divdojoType="dijit.form.VerticalRule"container="leftDecoration" count=6style="height:300px;width:5px;"> </div> <divdojoType="dijit.form.VerticalRule"container="rightDecoration" count=5style="height:300px;width:5px;"> </div> <oldojoType="dijit.form.VerticalRuleLabels"container="rightDecoration" style="height:300px;width:25px;font-size:75%;color:gray;"> <li>green tea</li> <li>coffee</li> <li>red bull</li> </ol> </div> </body> </html>
输出：
总结：分为三步（1）创建滑动条（2）创建刻度尺（3）创建标签。
参考：
http://dojotoolkit.org/documentation/tutorials/1.10/sliders/
http://www.ibm.com/developerworks/cn/web/wa-lo-dojointro5/
http://www.ibm.com/developerworks/cn/views/web/libraryview.jsp?search_by=掌握+Dojo
原文链接：https://www.f2er.com/dojo/291103.html