jQuery EasyUI/TopJUI基本的数字输入框(保留两位小数,带前缀后缀...)
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
作者:小策一喋
邮箱:xvpindex#qq.com
出处:http://www.cnblogs.com/xvpindex/
本文版权归作者和博客园共有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接,否则保留追究法律责任的权利。如果觉得本文对您有益,欢迎点赞、欢迎探讨。本博客来源于互联网的资源,若侵犯到您的权利,请联系博主予以删除。