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. javascript札记

    bind和unbind对应,live和die对应,千万别用bind绑定,用die解除.还有bind可以多次绑定同一个函数,可能会被执行多次同一个函数 正则表达式的使用 var email_reg = ...

  2. 全国各地dns服务器列表

    211.103.13.101 江苏省无锡市 移动DNS服务器 211.136.28.231 北京市 移动DNS服务器 211.136.28.234 北京市 移动DNS服务器 211.136.28.23 ...

  3. ansible-playbook 主机变量2

    ansible-playbook 配置 hosts 后可以指定变量,通过-k 可以交互输入密码,也可以将密码写在 hosts 文件中. 入口 yaml 文件中通过 {{ ** }} 获取变量,命令行通 ...

  4. POI解析Excel文件

    @Test public void test1() throws FileNotFoundException, IOException{ HSSFWorkbook workbook = new HSS ...

  5. （KMP 水）Wow! Such Doge! -- hdu -- 4847

    http://acm.hdu.edu.cn/showproblem.php?pid=4847 Wow! Such Doge! Time Limit:1000MS     Memory Limit:32 ...

  6. (最短路) Heavy Transportation --POJ--1797

    链接: http://poj.org/problem?id=1797 Heavy Transportation Time Limit: 3000MS   Memory Limit: 30000K To ...

  7. Resharper 修改命名空间

    1. 使用Reshared 右键->Refactor->Rename 修改所有文件的命名空间(鼠标移动到对应类的命名空间) 2.修改类库中的命名空间 包括程序集信息 右键->属性 3 ...

  8. Spark-1.2.2部署

    1.安装Scala 1.1解压和安装 在Scala官网http://www.scala-lang.org/download/下载Scala安装包,然后解压.(注:JDK的版本最好是1.7及以上,否则S ...

  9. EBS-DBA 维护

    --查询表空间使用率: SELECT UPPER(F.TABLESPACE_NAME) "表空间名", D.TOT_GROOTTE_MB "表空间大小(M)", ...

  10. Debezium for PostgreSQL to Kafka

    In this article, we discuss the necessity of segregate data model for read and write and use event s ...