本节课重点了解 EasyUI 中 NumberBox(数值输入框)组件的使用方法,这个组件依赖
于 ValidateBox(验证框)组件。
一. 加载方式
//class 加载方式
<input type="text" class="easyui-numberbox" value="100"
data-options="min:0,precision:2">
//JS 加载调用
$('#box').numberbox({
min : 0,
precision : 2,
});

二. 属性列表

//属性设置
$('#box').numberbox({
required : true,
min : 0,
precision : 2,
disabled : false,
value : 123.45,
max : 500,
decimalSeparator : ':',
groupSeparator : ',',
prefix : '$',
suffix : '€',
filter : function (e) {
return true;
},
formatter : function (value) {
return '123' + value;
},
parser : function (s) {
return s + 1;
},
});

四. 方法列表

//返回属性对象
console.log($('#box').numberbox('options'));
//销毁组件
$('#box').numberbox('destroy');
//禁用和启用
$('#box').numberbox('disable');
$('#box').numberbox('enable');
//修正为有效值
$(document).keyup(function () {
$('#box').numberbox('fix');
});
//赋值
$(document).click(function () {
$('#box').numberbox('setValue', 123);
});
//取值
$(document).click(function () {
console.log($('#box').numberbox('getValue'));
});;
//清空
$(document).click(function () {

$('#box').numberbox('clear');
});
//重置
$(document).click(function () {
$('#box').numberbox('reset');
});
PS:我们可以使用$.fn.numberbox.defaults 重写默认值对象。

NumberBox( 数值输入框) 组件的更多相关文章

  1. 第二百一十三节,jQuery EasyUI,NumberBox(数值输入框)组件

    jQuery EasyUI,NumberBox(数值输入框)组件 功能:只能输入数值,和各种数值的计算 学习要点: 1.加载方式 2.属性列表 3.事件列表 4.方法列表 本节课重点了解 EasyUI ...

  2. easyui源码翻译1.32--NumberBox(数值输入框)

    前言 扩展自$.fn.validatebox.defaults.使用$.fn.numberbox.defaults重写默认值对象.下载该插件翻译源码 数值输入框是用来限制用户只能输入数值型数据的.他可 ...

  3. [Input-number]数字输入框组件

    需求 加.减按钮 初始值 最大.最小值 数值改变时,触发一个自定义事件来通知父组件 目录文件 index.html 入口页 input-number.js 数字输入框组件 index.js 根实例 实 ...

  4. DateBox( 日期输入框) 组件

    本节课重点了解 EasyUI 中 DateBox(日期输入框)组件的使用方法,这个组件依赖于 Combo(自定义下拉框)和 Calendar(日历). 一. 加载方式//class 加载方式<i ...

  5. 【input】输入框组件说明

    input输入框组件 原型: <input value="[String]" type="[text | number | idcard | digit]" ...

  6. 基于Vue的数字输入框组件开发

    1.概述 Vue组件开发的API:props.events和slots 2.组件代码 github地址:https://github.com/MengFangui/VueInputNumber 效果: ...

  7. 第二百一十九节,jQuery EasyUI,DateTimeBox(日期时间输入框)组件

    jQuery EasyUI,DateTimeBox(日期时间输入框)组件 学习要点: 1.加载方式 2.属性列表 3.方法列表 本节课重点了解 EasyUI 中 DateTimeBox(日期时间输入框 ...

  8. 第二百一十五节,jQuery EasyUI,DateBox(日期输入框)组件

    jQuery EasyUI,DateBox(日期输入框)组件 学习要点: 1.加载方式 2.属性列表 3.事件列表 4.方法列表 本节课重点了解 EasyUI 中 DateBox(日期输入框)组件的使 ...

  9. flutter 自定义输入框组件

    一.组件分析 ui如下 根据UI分析我们需要提取哪些是动态的,可以通过传递参数得到不同的结果? 1.左侧icon 2.输入的文本 3.是否是密码框 4.输入框的控制器:如何时时得到输入框的值 二.快速 ...

随机推荐

  1. 32位和64位adb下载及安装

    一.已安装android sdk时 1.拷贝 从%ANDROID_HOME/platform-tools 下拷贝如下文件到/System32和/SysWOW64下即可. adb.exe AdbWinA ...

  2. li的border无法和上边对齐

    如果利用border设置四周的border,如果一边的边框比较长无法对齐 解决办法: .test{ position: relative; border: 1px solid #808080; hei ...

  3. ASP.net 中关于Session的存储信息及其它方式存储信息的讨论与总结

    通过学习和实践笔者总结一下Session 的存储方式.虽然里面的理论众所周知,但是我还是想记录并整理一下.作为备忘录吧.除了ASP.net通过Web.config配置的方式,还有通过其它方式来存储的方 ...

  4. Css溢出隐藏

    display: -webkit-box;-webkit-line-clamp: 2;     /*多少行数之后显示为省略...*/word-wrap: break-word;word-break: ...

  5. 简单代码JS随机,数组操作,延时执行

    <script language="javascript"> var str="baidu.com,163.com,sohu.com,kankan.com,1 ...

  6. Ubuntu下Git服务端搭建

    1安装git $ sudo add-apt-repository ppa:git-core/ppa $ sudo apt-get update $ sudo apt-get install git 测 ...

  7. PHP 访问类中的静态属性

    静态属性和普通属性不一样,静态属性只属于类本身而不属于类的任何实例,所以他们的访问方式也不一样.你可以把静态属性认为是存储在类当中的全局变量,而且你可以在任何地方通过类来访问它们. 在类本身中访问静态 ...

  8. 通过Linux系统Cron执行OwnCloud计划任务

    通过Linux系统Cron执行OwnCloud计划任务 02/02/2013 CRON的确是一个非常有用的功能,它有效减少了系统的负载,在将WordPress和StatusNet的任务计划都转换到Cr ...

  9. 转: Python 运算符与用法

    +加两个对象相加 3 + 5得到8.'a' + 'b'得到'ab'. (注意:6+'a'这样是错误的,但在PHP里这样是可以运行的) -减得到负数或是一个数减去另一个数 -5.2得到一个负数.50 - ...

  10. Linux内核源代码解析——TCP状态转移图以及其实现

    本文原创为freas_1990,转载请标明出处http://blog.csdn.net/freas_1990/article/details/10223581 TCP状态转移的原理并不高深,但是处理逻 ...