Dojo学习笔记(十五):Dojo滑动条Slider

前端之家收集整理的这篇文章主要介绍了Dojo学习笔记(十五):Dojo滑动条Slider前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

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>

输出

wKioL1RYmW_TYP-fAAANP0LKVfM164.jpg


--添加文本标签,创建水平滑动条:

<!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>

输出

wKiom1RYq2WgF4IfAABVGxgWhlk780.jpg


--添加文本标签,创建垂直滑动条:

<!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>

输出

wKiom1RYsG6hvY-xAAAWd2-dVIw434.jpg


--创建水平刻度:

<!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>

输出

wKioL1RYsoiBB6KgAAAkmq__a0c486.jpg

--创建垂直刻度

<!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>

输出

wKioL1RYs7HBIaUjAAAqslNwD98073.jpg


总结:分为三步(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

猜你在找的Dojo相关文章