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>

MiniUi-----Spinner 数值调节器(可以实现任意值的递增)的更多相关文章

  1. Duff策略

    Tom Duff首先在C语言中提出了展开循环的构想,所以这种模式被称之为Duff策略.Duff策略背后的思想是每一次循环完成标准循环的1-8次.首先通过数组值得总数除以8来取定循环次数.Duff发现对 ...

  2. 【转】MFC 字体LOGFONT

    Windows的字体LOGFONT LOGFONT是Windows内部字体的逻辑结构,主要用于设置字体格式,其定义如下:typedef struct tagLOGFONTA{    LONG      ...

  3. .net学习之类与对象、new关键字、构造函数、常量和只读变量、枚举、结构、垃圾回收、静态成员、静态类等

    1.类与对象的关系类是对一类事务的统称,是抽象的,不能拿来直接使用,比如汽车,没有具体指哪一辆汽车对象是一个具体存在的,看的见,摸得着的,可以拿来直接使用,比如我家的那辆刚刚买的新汽车,就是具体的对象 ...

  4. HTML查漏补缺 【未完】

    1.命名锚 HTML 链接 - name 属性 name 属性规定锚(anchor)的名称. 您可以使用 name 属性创建 HTML 页面中的书签. 书签不会以任何特殊方式显示,它对读者是不可见的. ...

  5. Redis数据结构之字符串

    学习阶段分成两个部分,一个是redis客户端,一个是java客户端操作 一:在redis客户端操作 1.先删除里面的几个key 2.set与get与getset 3.数值的增减 值递增1,或者减一 如 ...

  6. LeetCode刷题记录(python3)

    由于之前对算法题接触不多,因此暂时只做easy和medium难度的题. 看完了<算法(第四版)>后重新开始刷LeetCode了,这次决定按topic来刷题,有一个大致的方向.有些题不止包含 ...

  7. javascript 六种基本数据类型转换

    javascript 六种基本数据类型转换 1.显式转换 通过手动进行类型转换,Javascript提供了以下转型函数: 转换为数值类型:Number(mix).parseInt(string,rad ...

  8. 百度MUX：APP动效之美需内外兼修

    移动互联网时代已经到来.APP已如天空的繁星.数也数不清.随着手机硬件的不断升级,实现炫酷且流畅的动效不再是遥远的梦想.假设你是APP达人,喜欢试用各种APP,你肯定会发现越来越多的APP開始动效化. ...

  9. 面试lua笔试题各种坑

    替换字符串"abcdefgh" 中的"abc"为"ddc" local str ="abcdefgh"; b = str ...

随机推荐

  1. action spring 注入错误，如果检查各项注入都没有错误时，考虑struts 是否配置了namespace(如果你有多个namespace="/")

    [ERROR] 2015-01-04 09:42:35,180 (CommonsLogger.java:38) - Exception occurred during processing reque ...

  2. 彻底关闭win10的自动更新,一定要坚持看到最后一页

    https://jingyan.baidu.com/article/9faa7231e7b78b473c28cbb6.html 是否好使我还在测试,不好使的话,再跟新 2018-05-20 今天电脑又 ...

  3. Ansible 笔记 (3) - 编写 playbook

    playbook 相当于多个命令的编排组合然后一起运行,类似写脚本.在学习 playbook 之前需要了解 yaml 格式. 编写playbook的步骤: 定义主机与用户 编写任务列表 执行 play ...

  4. js基础学习笔记（四）

    4.1 什么是数组 我们知道变量用来存储数据,一个变量只能存储一个内容,存储多个值时,就需要用到数组. 数组是一个值的集合,每个值都有一个索引号,从0开始,每个索引都有一个相应的值,根据需要添加更多数 ...

  5. AirplaceLogger源代码解析

    将源代码添加进Eclipse中,右键-->Import-->Existing Projects into Workspace-->选择AirplaceLogger源代码文件夹即可导入 ...

  6. 关闭父类弹出的ifream窗口

    parent.document.getElementById('zhuce').style.display = 'none';

  7. ubuntu18.04 编译安装 apache php

    1. apache apache 需要依赖几个模块:apr, apr-util, pcre,也分别源码安装. 1.1 编译安装 1.1.1 apr apr-util 下载地址:http://apr.a ...

  8. nodejs async

    官网:https://github.com/caolan/async 流程控制:简化十种常见流程的处理集合处理:如何使用异步操作处理集合中的数据工具类:几个常用的工具类 流程控制 详细说明:http: ...

  9. spring mvc的例子

    现在主流的Web MVC框架除了Struts这个主力 外,其次就是Spring MVC了,因此这也是作为一名程序员需要掌握的主流框架,框架选择多了,应对多变的需求和业务时,可实行的方案自然就多了.不过 ...

  10. Delphi XE10 dxLayoutControl 控件应用指南

    https://www.cnblogs.com/Bonny.Wong/p/7440288.html DevExpress VCL套件是一套非常强大的界面控件,可惜关于Delphi开发方面的说明太少,有 ...