jQuery EasyUI/TopJUI基本的数字输入框(保留两位小数,带前缀后缀...)

numberbox(数值输入框)

HTML

required:必填字段,默认为false;prompt:显示在输入框的提示性文字;min/miax:最小/最大值;
precision:保留的小数位数;prefix:'¥':带前缀;suffix:'$':带后缀;groupSeparator:','字符分割整数组

  

    <fieldset>
<legend>基本数字输入框</legend>
</fieldset> <div class="topjui-row">
<div class="topjui-col-sm6">
<label class="topjui-form-label">年龄</label>
<div class="topjui-input-block">
<input type="text" name="age" data-toggle="topjui-numberbox"> //自然数
</div>
</div>
<div class="topjui-col-sm6">
<label class="topjui-form-label">工龄</label>
<div class="topjui-input-block">
<input type="text" name="gonglin" data-toggle="topjui-numberbox"
data-options="required:true,prompt:'工龄是必填字段'">
</td>
</div>
</div>
</div> <fieldset>
<legend>最大最小值限制</legend>
</fieldset> <div class="topjui-row">
<div class="topjui-col-sm6">
<label class="topjui-form-label">年龄</label>
<div class="topjui-input-block">
<input type="text" name="age" data-toggle="topjui-numberbox"
data-options="min:18,max:120,prompt:'输入范围18至120之间'">
</div>
</div>
<div class="topjui-col-sm6">
<label class="topjui-form-label">工龄</label>
<div class="topjui-input-block">
<input type="text" name="gonglin" data-toggle="topjui-numberbox"
data-options="required:true,min:1,max:60,prompt:'输入范围1到60之间'">
</td>
</div>
</div>
</div> <fieldset>
<legend>带精度的数值输入框</legend>
</fieldset> <div class="topjui-row">
<div class="topjui-col-sm6">
<label class="topjui-form-label">年龄</label>
<div class="topjui-input-block">
<input type="text" name="age" data-toggle="topjui-numberbox"
data-options="precision:2,prompt:'保留2位小数'">
</div>
</div>
<div class="topjui-col-sm6">
<label class="topjui-form-label">工龄</label>
<div class="topjui-input-block">
<input type="text" name="gonglin" data-toggle="topjui-numberbox"
data-options="precision:1,prompt:'保留1位小数'">
</td>
</div>
</div>
</div> <fieldset>
<legend>带标识的数值输入框</legend>
</fieldset> <div class="topjui-row">
<div class="topjui-col-sm6">
<label class="topjui-form-label">工资</label>
<div class="topjui-input-block">
<input type="text" name="age" data-toggle="topjui-numberbox"
data-options="prefix:'¥',prompt:'带前缀的输入'">
</div>
</div>
<div class="topjui-col-sm6">
<label class="topjui-form-label">奖金</label>
<div class="topjui-input-block">
<input type="text" name="gonglin" data-toggle="topjui-numberbox"
data-options="suffix:'$',prompt:'带后缀的输入'">
</div>
</div>
</div> <fieldset>
<legend>带格式化的数值输入框</legend>
</fieldset> <div class="topjui-row">
<div class="topjui-col-sm6">
<label class="topjui-form-label">工资</label>
<div class="topjui-input-block">
<input type="text" name="age" data-toggle="topjui-numberbox"
data-options="groupSeparator:',',prompt:'输入123456789试试'">
</div>
</div>
<div class="topjui-col-sm6">
<label class="topjui-form-label">奖金</label>
<div class="topjui-input-block">
<input type="text" name="gonglin" data-toggle="topjui-numberbox"
data-options="groupSeparator:',',precision:2,prompt:'输入1234567.89试试'">
</div>
</div>
</div>
</div>

  js

<input type="text" id="nn">

$('#nn').iNumberbox({
min:0,
precision:2
});

  设置输入框的值

$('#nn').iNumberbox('setValue', 206.12);

  获取输入框的值

var v = $('#nn').iNumberbox('getValue');
alert(v);

  

EasyUI中文网:http://www.jeasyui.cn

TopJUI前端框架:http://www.topjui.com

TopJUI交流社区:http://ask.topjui.com

最新文章

  1. Objective-C 排序
  2. MyEclipse取消自动跳到Console窗口
  3. AspxGridView整理文档【转】
  4. 设计模式17---设计模式之模板方法模式(Template Method)(行为型)
  5. jsonp+handler 的实现
  6. javascript之Number
  7. django restful webservice返回json数据
  8. 1001. Exponentiation高精度运算总结
  9. POJ1182食物链(并查集)
  10. 谈一次java web系统的重构思路
  11. 安装Redis 编译make gcc: error trying to exec &#39;cc1&#39;: execvp: 没有该文件或目录的错误
  12. Python程序里的注释和#号
  13. 了解java虚拟机—在TALB上分配对象(10)
  14. 使用开源库 SVPullToRefresh 实现上拉加载下拉刷新
  15. 给Jquery easyui 的datagrid 每行增加操作链接(转)
  16. MapReduce求最大值最小值问题
  17. 决策树遇到sklearn.exceptions.NotFittedError: XXX instance is not fitted yet. Call &#39;fit&#39; with appropriate arguments before using this method.的解决方案
  18. chrome插件控制台
  19. aop相关术语
  20. Git的三种区域

热门文章

  1. git设置只允许特定类型的文件
  2. myeclipse 安装flex插件后变为中文 修改配置文件切换到英文界面
  3. 右上角鼠标滑过展开收缩动画效果js代码的演示页面
  4. JS遍历ChexkBoxList
  5. Apache-SimpleEmail 简单应用
  6. L89
  7. 在线接口管理工具-eoapi
  8. selenium 经常用到的API
  9. 【MFC】动态创建CMFCToolbar图标不显示问题
  10. 集训Day11