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. spring 3 mvc 的 @ResponseBody返回数据中文乱码

    <bean class="org.springframework.web.servlet.mvc.annotation.AnnotationMethodHandlerAdapter&q ...

  2. 前端之css语法3

    一 float属性 1 基本的浮动规则: block元素和inline元素在文档流中的排列方式. block元素通常被现实独立的一块,独占一行.多个block元素会各自新起一行,默认block预算宽度 ...

  3. 2018.07.22哨戒炮 II（树形dp）

    哨戒炮 II 描述 你的防线成功升级,从原来的一根线变成了一棵树.这棵树有 N 个炮台,炮台与炮台之间 有 N-1 条隧道.你要选择一些炮台安装哨戒炮.在第 i 个炮台上安装哨戒炮得到的防御力为 vi ...

  4. MVC各层应该要实现的代码

    1.C 在设计良好的应用中,控制器很精练,包含的操作代码简短: 如果你的控制器很复杂,通常意味着需要重构,转移一些代码到其他类中. 归纳起来,控制器 可访问 请求 数据; 可根据请求数据调用 模型 的 ...

  5. 《Linux多线程编程手册》读书笔记

    第二章 基本线程编程 1.(P25)如果多个线程等待同一个线程终止,则所有等待线程将一直等到目标线程终止.然后,一个等待线程成功返回,其余的等待线程将失败并返回ESRCH错误. 2.(P26)将新线程 ...

  6. 类内初始值（c++11）

    1.概念 1)可以为数据成员提供一个类内初始值,创建对象时,类内初始值用于初始化数据成员,没有初始值的成员将被默认初始化 2)类内初始值和赋值类似,或者放在花括号里(如数组),或者放在等号右边,不能使 ...

  7. UVa 12003 Array Transformer (分块)

    题意:给定一个序列,然后有 m 个修改,问你最后的序列是什么,修改是这样的 l r v p 先算出从 l 到 r 这个区间内的 小于 v 的个数k,然后把第 p 个的值改成 k * u / (r - ...

  8. MFC框架仿真<二>

  9. OpenGL + MFC

    OpenGL超级宝典(中文版) 2001年 本书是一本完整而详尽的关于OpenGL的参考书,全书分为四部分:第一部分“OpenGL导言”介绍3D图形学的基本原理,读者将在此学会构造使用OpenGL的程 ...

  10. （KMP 最大表示最小表示）String Problem　-- hdu-- 3374

    http://acm.hdu.edu.cn/showproblem.php?pid=3374 String Problem Time Limit: 2000/1000 MS (Java/Others) ...