NumberBox( 数值输入框) 组件
本节课重点了解 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( 数值输入框) 组件的更多相关文章
- 第二百一十三节,jQuery EasyUI,NumberBox(数值输入框)组件
jQuery EasyUI,NumberBox(数值输入框)组件 功能:只能输入数值,和各种数值的计算 学习要点: 1.加载方式 2.属性列表 3.事件列表 4.方法列表 本节课重点了解 EasyUI ...
- easyui源码翻译1.32--NumberBox(数值输入框)
前言 扩展自$.fn.validatebox.defaults.使用$.fn.numberbox.defaults重写默认值对象.下载该插件翻译源码 数值输入框是用来限制用户只能输入数值型数据的.他可 ...
- [Input-number]数字输入框组件
需求 加.减按钮 初始值 最大.最小值 数值改变时,触发一个自定义事件来通知父组件 目录文件 index.html 入口页 input-number.js 数字输入框组件 index.js 根实例 实 ...
- DateBox( 日期输入框) 组件
本节课重点了解 EasyUI 中 DateBox(日期输入框)组件的使用方法,这个组件依赖于 Combo(自定义下拉框)和 Calendar(日历). 一. 加载方式//class 加载方式<i ...
- 【input】输入框组件说明
input输入框组件 原型: <input value="[String]" type="[text | number | idcard | digit]" ...
- 基于Vue的数字输入框组件开发
1.概述 Vue组件开发的API:props.events和slots 2.组件代码 github地址:https://github.com/MengFangui/VueInputNumber 效果: ...
- 第二百一十九节,jQuery EasyUI,DateTimeBox(日期时间输入框)组件
jQuery EasyUI,DateTimeBox(日期时间输入框)组件 学习要点: 1.加载方式 2.属性列表 3.方法列表 本节课重点了解 EasyUI 中 DateTimeBox(日期时间输入框 ...
- 第二百一十五节,jQuery EasyUI,DateBox(日期输入框)组件
jQuery EasyUI,DateBox(日期输入框)组件 学习要点: 1.加载方式 2.属性列表 3.事件列表 4.方法列表 本节课重点了解 EasyUI 中 DateBox(日期输入框)组件的使 ...
- flutter 自定义输入框组件
一.组件分析 ui如下 根据UI分析我们需要提取哪些是动态的,可以通过传递参数得到不同的结果? 1.左侧icon 2.输入的文本 3.是否是密码框 4.输入框的控制器:如何时时得到输入框的值 二.快速 ...
随机推荐
- vim 学习笔记
vim介绍:一款编辑器,另外一般linux系统会自带,所以一般linux下日志.配置文件等 纯文本文件的修改编辑等通过vim操作 学会的好处:1 方便操作linux下日志.配置文件等纯文本文件 2 功 ...
- JavaScript 之 使用 XMLHttpRequest 预览文件(图片)
<div id="div1"> <input type="file" id="uploadfile" style=&quo ...
- java学习——多线程
本文内容来源于 历经5年锤练--史上最适合初学者入门的Java基础视频 线程:就是进程中一个负责程序执行的控制单元(执行路径) 每一个线程都有自己运行的内容.这个内容可以称为线程要执行的任务. 多线 ...
- C++拾遗(十二)C++代码重用
“has-a”关系 通常有两种方法实现: 1.被包含,本身是另一个类的对象. 2.私有或者保护继承. 主要讨论第二种方法,在继承时使用private关键字(或者不用任何关键字,默认就是私有的). 使用 ...
- 关于keil单片机编程中的data,idata,xdata,pdata,code数据类型
从数据存储类型来说,8051系列有片内.片外程序存储器,片内.片外数据存储器,片内程序存储器还分直接寻址区和间接寻址类型,分别对应code.data.xdata.idata以及根据51系列特点而设定的 ...
- Oracle Union All 排序
在oracle中使用union all或者 union 对两个结果集进行并集操作时,如果需要对查询结果集进行排序时,不能直接在后面加order by + 表字段 来排序 例如: 在oracle的soc ...
- html表格table设置边框
对于很多初学HTML的人来说,表格<table>是最常用的标签了,但对于表格边框的控制,很多初学者却不甚其解. 一般我们用表格的时候总会给它个border属性,比如:<table b ...
- macbook air 安装win7系统时,到最后一步要进入win7,需要给PC设置一个用户名,键盘没反应
从 bootcamp安装:1.一定要同时选中第一项 制作usb安装盘和第二项 从网上下载最新的windows支持软件,2.然后再选第三项 安装winDows,3.当进入安装界面时选择你要安装的boot ...
- Spring碎点知识
1.依赖注入:不仅可以为Bean注入普通的属性值,还可以注入其他Bean的作用.通过配置文件组织在一起,这里的Bean是Java对象 说明:关于依赖注入与控制反转的这两个名字,表达的都是同一个意思,只 ...
- QT中使用Glut库
用Qt中的QGLWidget窗体类中是不包括glut工具库的,难怪在myGLWidget(在我的程序中是QGLWidget的派生类)中绘制实心球体是说“glutSolidSphere”: 找不到标识符 ...