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

分类：Dojo作者：佚名

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

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。

相关推荐

javascript – Dojo Grid – 在可编辑和不可编辑之间切换
我有一个网格,可以根据更大的树结构编辑小块数据.为了更容易知道用户保存了什么,我希望当用户第一次看到网格时,网格处于不可编辑状态.当用户准备好后,他们可以单击编辑按钮,这将使网格的某些部分可编辑.然后,有一个保存或取消按钮可以保存更改或还原.在大多数情况下它是有效的.但
javascript – 哪个框架(Jquery,Dojo,Raphael)更适合在教育视频游戏中实现SVG？
我即将开始开发一款教育性的视频游戏.我已经决定以一种我可以轻松打包为Web,Mobiles和可能的Standalone版本的方式来实现这一目标.我不想使用Flash.因此,我确信(无论如何我会听取建议)使用JavaScript和SVG.我正在对这个问题进行大量研究,但我很难把各个部分放在一起.我知道Raphae
javascript – 将实数值绑定到Grails域属性(Dojo小部件发送的值)
我正在使用带有Grails2.3.9的Dojo1.9.DojoNumberTextBox小部件–我在表单中使用–将固定格式(JavaScript基本格式)的实数值(例如：12.56)设置为HTML表单输入字段(但根据浏览器区域设置显示/编辑它们,所以用户总是看到格式正确的数字).另一方面,Grails期望输入字段根据浏览器
arcgis api for javaScript1：本地部署
1.引言鉴于个人需求的转变，本系列将记录自学arcgisapiforjavaScript的学习历程，本篇将从最开始的arcgisapiforjavaScript部署开始，个人声明：博文不在传道受业解惑，旨在方便日后复习查阅。由于是自学，文章中可能会出现一些纰漏，请留言指出，不必留有情面哦！2.下载ArcGISforDe
javascript – 为declare解释这个令人困惑的dojo教程语法
我正在阅读使用dojo’sdeclare进行类创建的语法.描述令人困惑：Thedeclarefunctionisdefinedinthedojo/_base/declaremodule.declareacceptsthreearguments:className,superClass,andproperties.ClassNameTheclassNameargumentrepresentsthenameofthec
客户端的JavaScript框架
我的团队由更多的java人员和JavaScript经验丰富组成.我知道这个问题曾多次被问到,但为了弄清楚我的事实,我需要澄清一些事情,因为我在客户端技术方面的经验非常有限.我们决定使用GWT而不是纯JavaScript框架构建我们的解决方案(假设有更多的Java经验).这些是支持我的决定的事实.>
Dojo 路由
路由dojo/framework/srcouting/README.mdcommitb682b06ace25eea86d190e56dd81042565b35ed1Dojo应用程序的路由路由FeaturesRoute配置路径参数RouterHistoryManagersHashHistoryStateHistoryMemoryHistoryOutletEventRouterContextInjectionOutl
javascript – jquery有相同的dojo.connect()吗？
请原谅我的无知,因为我对jquery并不熟悉.是否有dojo.connect()的等价物？我找到了这个解决方案：http:/hink-robot.com/2009/06/hitch-object-oriented-event-handlers-with-jquery/但是没有断开功能！你知道jquery的其他解决方案吗？有jquery.connect但这个插件在我的测试中不起作用.
dojo--inherited
与java类一样，在dojo里也可以定义constructor 构造函数，在创建一个实例时可以对需要的属性进行初始化。//定义一个类mqsy_yjvar mqsy_yj=declare(null,{     //thedefaultusername    username: "yanjun",          //theconstructor   
javascript – Dojo有没有编码标准？
我一直在寻找一些最佳实践,并想知道Dojo是否具有框架特定的最佳实践,还是最好只使用通用的Javascript标准？特别是我主要是寻找一些功能和类评论的指导方针？解决方法:对于初学者来说,这是项目的风格指南：DojoStyleGuide
javascript – 如何使用dojo将字符串解析为日期模式
我有’05/17/2010’的价值我想通过使用dojo.date.locale将其作为“2010年5月17日”.我尝试过使用dojo.date.locale.parse,如下所示：x='05/17/2010'varx=dojo.date.locale.parse(x,{datePattern:"MM/dd/yyyy",selector:"date"});alert(x)这并没有给我所需的日期
javascript – 在dojo内部调用对象方法
我正在尝试创建一个包含函数的dojo类,这些函数又调用此类中的其他函数,如下所示：dojo.provide("my.drawing");dojo.declare("my.drawing",null,{constructor:function(/*Object*/args){dojo.safeMixin(this,args);this.container=args[0];
javascript – 我可以将Dojo名称空间更改为dojo以外的名称吗？
我知道你可以使用jQuery.noConflict为jQuery做这件事.有没有办法与Dojo做类似的事情？解决方法:我相信你可以.有关在页面上运行多个版本的Dojo,请参阅thispage.它很繁琐,但似乎是你正在寻找的东西.一般来说,Dojo和jQuery都非常小心,不会破坏彼此或其他任何人的变量名.
javascript – 如何在Dojo中保存过滤器
我有一个EnhancedGrid,用户经常使用复杂的过滤器.有没有办法允许用户保存或标记过滤器,以便将来可以轻松地重新应用它？我知道我可以通过编程方式设置过滤器,但我无法预测用户想要的过滤器.谢谢！编辑：自己做了一些进展…使用grid.getFilter()返回过滤器的JSON表示,然后使用json.strin
javascript – Dojo到jQuery迁移
我有这个代码：dojo.declare("City",null,{constructor:function(cityid,cityinfo){}});dojo.declare("TPolyline",GPolyline,{constructor:function(points,color){},initialize:function(map){});应该是什
为什么非dojo javascript错误似乎是由dojo.xd.*.js在chrome中指定的？
我遇到的问题是我的所有javascript错误似乎来自dojo.xd.js或子模块.我正在使用chrome调试器和许多dijit功能,如dijit.declaration和dojo.parser.这有点烦人,因为它很难找到简单的错误或滑倒.我希望我可以添加一个选项,允许我的调试器在我的非dojo代码中显示选项会发生的位置.我是
javascript – 分解Dojo格式/解析模式
我正在使用DojoToolkit数字/解析函数来处理格式化和使用ICU模式语法解析字符串.有没有人知道有可能采取任意ICU模式字符串并以某种方式使用Dojo(或其他)库将其分解为它的部分(例如,对于数字模式,它可以被分解为小数位数,数千个分组等…).我希望这样做,而不需要让我的代码密切了
访问在不同文件中定义的javascript函数
我有两个看似相关的问题,访问在不同的地方定义的javascript函数.我遇到的第一个问题是调用我在firgbug或safari控制台中定义的函数.我定义了一个名为getRed的函数,如下所示：functiongetRed(row,col){//dosomethingstuffandreturntheredvalueasa
javascript – Dojo – 在标题之外添加外部样式表
我想添加一个在Ajax调用中指定的外部样式表.我已经找到了一种方法来使用jQuery(参见下面的示例),但是我需要使该方法适应dojoJavaScript框架.JQuery示例$('head').append('<linkrel="stylesheet"type="text/css"href="lightbox_stylesheet.css">');谢谢.解决方法:一旦你
javascript – Dojo.Connect事件没有被调用 – 为什么？
我正在尝试使用dojo.connect将onMouseDown事件连接到图像,如：dojo.connect(dojo.byId("workpic"),"onMouseDown",workpicDown);functionworkpicDown(){alert("mousedown");}类似的代码几行后,我将onMouse*事件连接到dojo.body确实完全正常工作.但是当我点击图像时
pythonJavaScriptjavaHTMLPHPreactjsC#AndroidCSSNode.jssqlrpython-3.xMysqLjQueryc++pandasFlutterangularIOSdjangolinuxswifttypescript路由器JSON路由器设置无线路由器h3c华三华三路由器设置华三路由器电脑软件教程arraysdocker软件图文教程Cvue.jslaravelspring-boot