Dojo学习笔记（十五）：Dojo滑动条Slider

发布时间：2020-12-16 21:25:27 所属栏目：百科来源：网络整理

导读：Slider没有相对应的 HTML 控件，是一个相对独立的图形化的组件，可以通过鼠标、方向键来控制刻度尺的刻度。Dijit提供了水平和垂直滑动条。 Slider widget的使用却如同使用 CheckBox widget一样的方便。用户可以用鼠标点击、拖拉、中键滚动或者用键盘的上、下

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&nbsp;tea</li>
<li>coffee</li>
<li>red&nbsp;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

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!