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. jquery和js中走的弯路

    1.$.each的错误用法 $.each的return xx 不能结束外层的函数,但return true/false可以 所以一般的: var result; $.each(json,functio ...

  2. 专2-第一课 Ubuntu系统安装与配置

    1.1 使用VMware安装Ubuntu 1.1.1 准备工作 1)VMware的安装包 VMware至少要用10.0版本,本文采用最新的VMware12版本,这个版本对USB3.0的支持更加完善稳定 ...

  3. 2018.09.20 atcoder 1D Reversi（模拟）

    传送门 考虑每次摆石头都会消去最外层的一个连续颜色串. 所以只用统计一下有多少段颜色即可. 代码: #include<bits/stdc++.h> using namespace std; ...

  4. 2018.07.18 HAOI2009 逆序对数列（线性dp）

    传送门 目前只会n2" role="presentation" style="position: relative;">n2n2的dp" ...

  5. DataGrid组件

    <?xml version="1.0" encoding="utf-8"?><s:WindowedApplication xmlns:fx=& ...

  6. 重大发现 springmvc Controller 高级接收参数用法

    1.  数组接收 @RequestMapping(value="deleteRole.json") @ResponseBody public Object deleteRole(S ...

  7. Linux常见配置文件

    一./etc 配置文件 /etc/passwd 用户数据库,其中的域给出了用户名.真实姓名.家目录.加密口令和用户的其他信息 /etc/group 类似/etc/passwd ,但说明的不是用户而是组 ...

  8. SoapUI5.1.2安装和破解教程

    一.SoapUI简介 soapui提供一个工具通过soap/http来检查,调用,实现web service和web service的功能/负载/符合性测试. 该工具既可作为一个桌面应用软件使用,也可 ...

  9. nodejs+express安装配置（Linux版本）

    在ubuntu下面,直接从源里面安装nodejs的话,此版本还行,但是相关的express等,会比较老. 采用源码安装,先下载nodejs的源码,然后三步: ./configure make make ...

  10. 笔记本U盘安装CentOS 7

    1. 下载镜像,制作U盘安装盘,设置BIOS启动等内容网上有大量的文章,本文不再赘述. 2. 开机U盘启动后会看到这样的界面: 3. 笔记本安装CentOS最容易出问题的地方在于USB安装盘的选择,如 ...