EasUI jQuery 数字框小部件

简介

EasUI（EasyUI）是由jeasyui团队推出的一个功能丰富的jQuery插件集。EasUI jQuery 数字框小部件是其中的一种，它提供了一个可自定义长度、范围以及步长的数字框部件，可在web应用程序中使用。

特性

• 支持自定义数字框控件的长度、范围和步长。
• 可以通过spin按钮、鼠标滚轮和键盘箭头键进行调节。
• 支持通过回调函数触发事件。
• 样式可自定义。

如何使用

引入依赖

引入EasUI和jQuery库文件：

<link rel="stylesheet" type="text/css"
		href="/easui/themes/default/easyui.css">
<link rel="stylesheet" type="text/css"
		href="/easui/themes/icon.css">
<script type="text/javascript" src="/easui/jquery.min.js"></script>
<script type="text/javascript"
		src="/easui/jquery.easyui.min.js"></script>

HTML代码

在你的HTML表单中添加如下代码：

<input class="easyui-numberbox" id="numBox" name="numBox" value="0">

JavaScript 代码

添加如下JavaScript代码初始化数字框部件：

$('#numBox').numberbox({
    precision: 2,  // 小数点后位数
    min: 0,   // 最小值
    max: 100,  // 最大值
    increment: 0.5,  // 步长
    disabled: false,  // 禁用状态
    readonly: false,  // 只读状态
	onChange: function(newVal, oldVal) {  // 数值变化事件回调函数
		console.log('New Value: ', newVal);
		console.log('Old Value: ', oldVal);
	}
});

样式自定义

• 修改数字框背景色：

/* 修改数字框背景色为红色 */
#numBox {
    background-color: red;
}

• 修改 increase 和 decrease 按钮样式：

/* 修改数字框 increase 和 decrease 按钮为圆形 */
.numberbox .spinner-up, .numberbox .spinner-down {
    border-radius: 20px;
}

可选参数

| 参数 | 描述 | 类型 | 默认值 | | --- | --- | --- | --- | | precision | 小数点后的位数 | number | 0 | | min | 最小值 | number | null | | max | 最大值 | number | null | | increment | 每次增量(步长) | number | 1 | | disabled | 是否禁用 | boolean | false | | readonly | 是否只读 | boolean | false | | value | 初始值 | number | null | | onChange | 数值变化事件回调函数 | function(newValue, oldValue) | null |

结尾语

EasUI jQuery 数字框小部件是用于web应用程序中的一个多功能数字框控件。使用它可以让你快速地添加一个数字输入框。希望这篇介绍对你有用。