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. Determine overlapping rectangles

    https://github.com/Premiumlab/Python-for-Algorithms--Data-Structures--and-Interviews/blob/master/Moc ...

  2. Remove duplicates

    https://github.com/Premiumlab/Python-for-Algorithms--Data-Structures--and-Interviews/blob/master/Moc ...

  3. C++加速程序的全局执行函数

    static int wing=[]() { std::ios::sync_with_stdio(false); cin.tie(NULL); ; }(); C++的cin和cout在输入输出时,会先 ...

  4. linux下mysql命令大全

    1.linux下启动mysql的命令: mysqladmin start /ect/init.d/mysql start (前面为mysql的安装路径) 2.linux下重启mysql的命令: mys ...

  5. Redis配置总结

    一:常用配置 1.bind,格式为bind 127.0.0.1:这个是很重要的配置,如果bind 127.0.0.1则外部网络是访问不了的(如果外部网络要访问还要开放端口) 2.port,格式为por ...

  6. Shell编程-05-Shell中条件测试与比较

    目录 Shell脚本条件测试 Shell文件测试 Shell字符测试 Shell整数测试 Shell逻辑测试 Shell条件测试总结 Shell脚本条件测试     在Shell脚本中各种条件结构和流 ...

  7. CGA裁剪算法之线段裁剪算法

    CGA裁剪算法之线段裁剪算法 常用的线段裁剪算法有三种:[1]Cohen_SutherLand裁剪算法,[2]中点分割裁剪算法,[3]参数化方法. 1. Cohen_SutherLand裁剪算法 为了 ...

  8. Opengl中的gluProject函数认识

    1. 从官方说明如下 https://www.opengl.org/sdk/docs/man2/xhtml/gluProject.xml Name gluProject — map object co ...

  9. SSH框架中配置log4j的方法

    SSH框架中使用log4j的方便之处 1. 动态的改变记录级别和策略,即修改log4j.properties,不需要重启Web应用,这需要在web.xml中设置一下.2. 把log文件定在 /WEB- ...

  10. Delphi for iOS开发指南(5):在iOS应用程序中使用Calendar组件来选择日期

    http://blog.csdn.net/delphiteacher/article/details/8923519 在FireMonkey iOS应用程序中的Calendar FireMonkey使 ...