jquery easyui之 numberbox


    这个是easyui的一款工具,只能输入数字的一个文本框,下面是他的属性以及方法和一些具体的应用
     用法:
    
    $("#ss").numberbox({
       min:200,
       max:2000,
     //显示在小数点后面具体的精度
       precision:2
     });
 
   下面是他一个api:
     常用的属性为:
 
   
Name Type Description Default
disabled boolean Defines if to disable the field. false
value number The default value.
min number The minimum allowed value. null
max number The maximum allowed value. null
precision number The maximum precision to display after the decimal separator. 0
decimalSeparator string The decimal character separates the integer and decimal parts of a number. .
groupSeparator string The character that separates integer groups to show thousands and millions.
prefix string The prefix string.
suffix string The suffix string.
formatter function(value) A function to format the numberbox value. Return string value that will display on box.
parser function(s) A function to parse a string. Return numberbox value.
Events
Name Parameters Description
onChange newValue,oldValue Fires when the field value is changed.
Methods
The methods extend from validatebox, below is the added or overridden methods for numberbox.
Name Parameter Description
options none Return the numberbox options.
destroy none Destroy the numberbox object.
disable none Disable the field.
enable none Enable the field.
fix none Fix the value to valid value.
setValue value Set numberbox value.
Code example:
$('#nn').numberbox('setValue', 206.12);
getValue none Get numberbox value.
Code example:
var v = $('#nn').numberbox('getValue'); alert(v);
clear none Clear numberbox value.
reset none Reset numberbox value. This method is available since version 1.3.2.
以下是一个使用 EasyUI 的 `numberbox` 组件的 `onchange` 事件的示例: ```html <!DOCTYPE html> <html> <head> <title>EasyUI NumberBox onchange Event Demo</title> <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/jquery-easyui@1.9.21/themes/bootstrap/easyui.css"> <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.min.js"></script> <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/jquery-easyui@1.9.21/jquery.easyui.min.js"></script> </head> <body> <input id="numberbox" class="easyui-numberbox" style="width: 200px;"> <script type="text/javascript"> $(function() { $('#numberbox').numberbox({ onChange: function(newValue, oldValue) { console.log('新值:' + newValue); console.log('旧值:' + oldValue); // 其他处理... } }); }); </script> </body> </html> ``` 在上面的示例中,我们引入了 EasyUI 的样式和脚本文件。然后,我们创建了一个 `numberbox` 输入框,并设置了宽度为 200 像素。 在 JavaScript 部分,我们使用了 `$()` 函数来初始化 `numberbox` 组件,并通过 `onChange` 属性定义了回调函数。当输入框的值发生变化时,回调函数会被触发,并将新值和旧值作为参数传递给回调函数。在示例中,我们简单地将新值和旧值打印到控制台上,你可以根据需要进行其他的处理操作。 你可以将以上代码保存为一个 HTML 文件,并在浏览器中打开该文件,即可看到 `numberbox` 输入框,并在控制台中查看值变化时的输出。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值