使用须知
如何开始
安装
全局元素
样式重置
文字
颜色
徽章
提示框
表格
图标
栅格
原生组件
Panel
Accordion
Tabs
Layout
DataGrid
DataList
PropertyGrid
Tree
TreeGrid
LinkButton
Menu
MenuButton
SplitButton
SwitchButton
TabButton
Pagination
ProgressBar
SearchBox
Form
CheckBox
RadioBox
TextBox
PasswordBox
FileBox
TagBox
Combo
ComboBox
ComboGrid
ComboTree
ComboTreeGrid
ComboFilter
NumberBox
NumberSpinner
Calendar
DateBox
DateRangeBox
DateTimeBox
DateTimeRangeBox
TimeSpinner
DateTimeSpinner
Slider
ValidateBox
ImagesBox
Window
Dialog
Messager
Draggable
Droppable
Resizable
Tooltip
MaskedBox
扩展组件
头像
上传
时间轴
聊天
用户面板
消息面板
统计数据面板
Echart面板
圆形统计图
评论
相册
评分
文件
滚动条
二维码
条形码
天气
AT
编辑器
课程表
日程表
项目管理
客户管理
浏览器
FAQ
兼容插件
IconFont
Font Awesome
Ueditor
Ckeditor
Echarts
Plupload
Cropper
BaiduMap
AMap
Colpick
Nprogress
Gantt
GanttEditor
Raty
WebUploader
匿名
匿名 您还未登录

NumberBox

Document
Native
Basic
Format NumberBox
Number Range
Fluid NumberBox
Plus
Extend

NumberBox Document

扩展自$.fn.validatebox.defaults。使用$.fn.numberbox.defaults重写默认值对象。
数值输入框是用来限制用户只能输入数值型数据的。他可以转换一个输入的元素到其他类型,比如:数字、百分比、货币等。更多的输入类型定义依赖于'formatter'和'parser'函数。

文档汉化:

汉化人:王锦阳
汉化语言:简体中文
个人博客:http://blog.sina.com.cn/richie696

依赖关系:

用法:

使用标签创建数值输入框。

				
<input type="text" class="easyui-numberbox" value="100" data-options="min:0,precision:2"></input> 
				
			

使用Javascript创建数值输入框。

				
<input type="text" id="nn"></input>  
<script type="text/javascript">
$('#nn').numberbox({    
    min:0,    
    precision:2    
});  
</script>
				
			

属性:

数值输入框的属性扩展自validatebox(验证框),数值输入框新增的属性如下:

属性名 属性值类型 描述 默认值
disabled boolean 是否禁用该字段。 false
value number 默认值。
min number 允许的最小值。 null
max number 允许的最大值。 null
precision number 在十进制分隔符之后显示的最大精度。(即小数点后的显示精度) 0
decimalSeparator string 使用哪一种十进制字符分隔数字的整数和小数部分。 .
groupSeparator string 使用哪一种字符分割整数组,以显示成千上万的数据。(比如:99,999,999.00中的','就是该分隔符设置。)
prefix string 前缀字符。(比如:金额的$或者¥)
suffix string 后缀字符。(比如:后置的欧元符号€)
filter function(e) 定义如何过滤按键,当返回true时则允许输入,反之禁止。(该属性自1.3.3版开始可用)
formatter function(value) 用于格式化数值的函数。返回字符串值以显示到输入框中。
parser function(s) 用于解析字符串的函数。返回数值。

事件:

事件名 参数 描述
onChange newValue,oldValue 当字段值更改的时候触发。

方法:

数值输入框的方法扩展自validatebox(验证框),数值输入框新增或重写的方法如下:

方法名 方法属性 描述
options none 返回数值输入框属性。
destroy none 销毁数值输入框对象。
disable none 禁用字段。
enable none 启用字段。
fix none 将输入框中的值修正为有效的值。
setValue value 设置数值输入框的值。

代码示例:
				
<script type="text/javascript">
$('#nn').numberbox('setValue', 206.12);
</script>
				
			
getValue none 获取数值输入框的值。

代码示例:
				
<script type="text/javascript">
var v = $('#nn').numberbox('getValue');
alert(v);
</script>
				
			
clear none 清楚数值输入框的值。
reset none 重置数值输入框的值。(该方法自1.3.2版开始可用)