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 boolean
true
指定是否在刻度条两端显示增加和减小的按钮

    函数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 String 指定为文本标签设置 CSS style
minimum

Integer

0

在没有指定标签数组情况下,以这个值最左(下)端标签
maximum

Integer

1

在没有指定标签数组情况下,以这个值最右(上)端标签
getLabels

Function

[]

返回labels数组
constraints

Object

{pattern:"#%"}

在没有指定标签数组情况下,使用这个对象包含的模式来生成数字标签


--声明方式:

<!DOCTYPE HTML>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Demo: Slider</title>
    <link rel="stylesheet" href="dijit/themes/claro/claro.css">
    <script src="dojo/dojo.js" data-dojo-config="async: true, parseOnLoad: true"></script>
    <script>
        // 导入slider所需类
        require(["dijit/form/VerticalSlider", "dojo/parser"]);
    </script>
</head>
<body class="claro">
<input id="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>

--编程方式:

<!DOCTYPE HTML>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Demo: Slider</title>
    <link rel="stylesheet" href="dijit/themes/claro/claro.css">
    <script src="dojo/dojo.js" data-dojo-config="async: true, parseOnLoad: true"></script>
    <script>
        // 导入slider所需类
        require(["dijit/form/VerticalSlider"], function(VerticalSlider) {
        //创建垂直滑动条
            var vertSlider = new VerticalSlider({
                minimum: 0,
                maximum: 100,
                pageIncrement: 20,
                value: 20,
                intermediateChanges: true,
                style: "height: 200px;"
            }, "vertSlider");
            // Start up the widget
            vertSlider.startup();
        });
    </script>
</head>
<body class="claro">
<input id="vertSlider" />
</body>
</html>

输出:

wKioL1RYmW_TYP-fAAANP0LKVfM164.jpg


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

<!DOCTYPE HTML>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Demo: Slider</title>
    <link rel="stylesheet" href="dijit/themes/claro/claro.css">
    <script src="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>
<body class="claro">
<div style="width: 600px;margin-left: 30px;">
    <!-- 创建水平滑动条标签-->
    <ol data-dojo-type="dijit/form/HorizontalRuleLabels"
        data-dojo-props="container: 'topDecoration',count: 11,numericMargin: 0"
        style="height: 1.2em; font-weight: bold">
    </ol>
    <!-- 创建水平滑动条刻度尺-->
    <div data-dojo-type="dijit/form/HorizontalRule"
         data-dojo-props="container: 'topDecoration',count: 11"
         style="height: 5px;margin:0  12px;">
    </div>
    <!--创建水平滑动条,隐藏滑动条两端button-->
    <input id="hslider" type="range" value="3"
           data-dojo-type="dijit/form/HorizontalSlider"
           data-dojo-props="minimum: 0,maximum: 10,showButtons: false,discreteValues: 11">
    <!-- 创建水平滑动条刻度尺-->
    <div data-dojo-type="dijit/form/HorizontalRule"
         data-dojo-props="container: 'bottomDecoration',count: 5"
         style="height: 5px; margin: 0 12px;">
    </div>
    <!-- 创建水平滑动条标签-->
    <ol data-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


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

<!DOCTYPE HTML>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Demo: Slider</title>
    <link rel="stylesheet" href="dijit/themes/claro/claro.css">
    <script src="dojo/dojo.js" data-dojo-config="async: true, parseOnLoad: true"></script>    
</head>
<body class="claro">
<div id="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) {
                // 创建刻度尺
                var rulesNode = domConstruct.create("div", {}, dom.byId("vertSlider"), "first");
                var sliderRules = new VerticalRule({container: "leftDecoration",count: 11,style: "width: 5px;"}, rulesNode);
                // 创建标签
                var labelsNode = domConstruct.create("div", {}, dom.byId("vertSlider"), "first");
                var sliderLabels = new VerticalRuleLabels({container: "rightDecoration",labelStyle: "font-style: italic; font-size: 0.75em"}, labelsNode);
                // 创建垂直滑动条
                var vertSlider = new VerticalSlider({minimum: 0,maximum: 100,pageIncrement: 20,value: 20,intermediateChanges: true,style: "height: 200px;"}, "vertSlider");
                // 生成小部件
                vertSlider.startup();
                sliderRules.startup();
                sliderLabels.startup();
            });
</script>
</body>
</html>

输出:

wKiom1RYsG6hvY-xAAAWd2-dVIw434.jpg


--创建水平刻度:

<!DOCTYPE HTML>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Demo: Slider</title>
    <link rel="stylesheet" href="dijit/themes/claro/claro.css">
    <script src="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>
<body class="claro">
<div dojoType="dijit.form.HorizontalSlider" name="caffeine"
     value="100"
     maximum="175"
     minimum="2"
     showButtons="false"
     style="margin: 5px;width:300px; height: 20px;">
    <script type="dojo/method" event="onChange" args="newValue">
        console.log(newValue);
    </script>
    <ol dojoType="dijit.form.HorizontalRuleLabels" container="topDecoration"
        style="height:10px;font-size:75%;color:gray;" count="6">
    </ol>
    <div dojoType="dijit.form.HorizontalRule" container="topDecoration"
         count=6 style="height:5px;">
    </div>
    <div dojoType="dijit.form.HorizontalRule" container="bottomDecoration"
         count=5 style="height:5px;">
    </div>
    <ol dojoType="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

--创建垂直刻度

<!DOCTYPE HTML>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Demo: Slider</title>
    <link rel="stylesheet" href="dijit/themes/claro/claro.css">
    <script src="dojo/dojo.js" data-dojo-config="async: true, parseOnLoad: true"></script>
    <script>
        // 导入slider所需类
        require(["dijit/form/VerticalSlider", "dijit/form/VerticalRuleLabels", "dijit/form/VerticalRule", "dojo/parser"]);
    </script>
</head>
<body class="claro">
<div dojoType="dijit.form.VerticalSlider" name="caffeine"
     value="100"
     maximum="175"
     minimum="2"
     showButtons="false"
     style="margin: 5px;width:75px; height: 300px;">
    <script type="dojo/method" event="onChange" args="newValue">
        console.log(newValue);
    </script>
    <ol dojoType="dijit.form.VerticalRuleLabels" container="leftDecoration"
        style="height:300px;width:25px;font-size:75%;color:gray;" count="6">
    </ol>
    <div dojoType="dijit.form.VerticalRule" container="leftDecoration"
         count=6 style="height:300px;width:5px;">
    </div>
    <div dojoType="dijit.form.VerticalRule" container="rightDecoration"
         count=5 style="height:300px;width:5px;">
    </div>
    <ol dojoType="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






本文出自 “IT技术学习与交流” 博客,谢绝转载!

你可能感兴趣的:(dojo,dijit)