zoukankan      html  css  js  c++  java
  • MiniUi-----Spinner 数值调节器(可以实现任意值的递增)

     Spinner 数值调节器可以实现任意值的递增,每次的递增值主要是通过increment="递增值"属性来控制的。

    属性

    该属性扩展自验证框(validatebox),下面是为微调器(spinner)添加的属性。

    名称类型描述默认值
    width number 该组件的宽度。 auto
    height number 该组件的高度。该属性自版本 1.3.2 起可用。 22
    value string 初始值。  
    min string 允许的最小值。 null
    max string 允许的最大值。 null
    increment number 点击微调器按钮时的增量值。 1
    editable boolean 定义用户是否可以往文本域中直接输入值。 true
    disabled boolean 定义是否禁用文本域。 false
    spin function(down) 当用户点击微调按钮时调用的函数。'down' 参数指示用户是否点击了向下微调按钮。  

    -----------------------------------------------页面样式---------------------------------------------------------------

    -----------------------------------------------具体的代码实现---------------------------------------------------------------

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <title>Spinner 数值调节器</title>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8" /><link href="../demo.css" rel="stylesheet" type="text/css" />


    <script src="../../scripts/boot.js" type="text/javascript"></script>


    </head>
    <body>
    <h1>Spinner 数值调节器</h1>

    <input id="sp1" changeOnMousewheel="false" class="mini-spinner" minValue="200" maxValue="250" onvaluechanged="onValueChanged"/>


    <br /><br />
    <input type="button" value="setValue" onclick="setValue()"/>
    <input type="button" value="getValue" onclick="getValue()"/>
    <input type="button" value="disable" onclick="disable()"/>
    <input type="button" value="enable" onclick="enable()"/>

    <script type="text/javascript">
    var count = 0;
    function onValueChanged(e) {

    count++;
    document.title = count;
    }
    function setValue() {
    var t = mini.get("sp1");
    t.setValue("222");
    }
    function getValue() {
    var t = mini.get("sp1");
    alert(t.getValue());
    }
    function enable() {
    var t = mini.get("sp1");
    t.enable();
    }
    function disable() {
    var t = mini.get("sp1");
    t.disable();
    }
    </script>

    <h1>小数点、千分位</h1>

    <input id="sp2" class="mini-spinner" value="123456.123" minValue="-1000000" maxValue="1000000" format="n2" increment="0.1"/>

    <br /><br />
    <h1>货币</h1>
    <input class="mini-spinner" value="123456.123" minValue="-1000000" maxValue="1000000" format="c4" increment="2"/>

    <br /><br />
    <h1>百分比</h1>
    <input class="mini-spinner" increment="0.01" value="0.123" minValue="0" maxValue="1" format="p2"/>

    <br /><br />
    <h1>自定义</h1>
    <input class="mini-spinner" value="123456.123" minValue="-1000000" maxValue="1000000" format="¥#,0.00"/>

    <div class="description">
    <h3>Description</h3>
    <p>Spinner实现数字的输入,format实现数字格式化:</p>
    <ul>
    <li>小数点和千分位:format="n"</li>
    <li>货币格式:format="c"。</li>
    <li>百分比格式:format="p"。</li>
    <li>自定义格式:format="¥#,0.00"。</li>
    </ul>
    </div>
    </body>
    </html>

  • 相关阅读:
    异常方法测试实验
    exception测试实验(研究finally的作用)
    idea中文注释出现乱码,我靠自己解决了
    按装parallels tool的失败之路
    实验七
    实验六
    实验五
    实验四
    实验3
    html转义字符图
  • 原文地址:https://www.cnblogs.com/wllcs/p/6429764.html
Copyright © 2011-2022 走看看