easyui源码翻译1.32--NumberBox（数值输入框）
前言
扩展自$.fn.validatebox.defaults。使用$.fn.numberbox.defaults重写默认值对象。下载该插件翻译源码
数值输入框是用来限制用户只能输入数值型数据的。他可以转换一个输入的元素到其他类型，比如：数字、百分比、货币等。更多的输入类型定义依赖于'formatter'和'parser'函数
源码
/** * jQuery EasyUI 1.3.2 * *翻译：qq 1364386878 数值输入框 */ (function ($) { //隐藏字段 function hiddenField(target) { $(target).addClass("numberbox-f"); var v = $("<input type=\"hidden\">").insertAfter(target); var name = $(target).attr("name"); if (name) { v.attr("name", name); $(target).removeAttr("name").attr("numberboxName", name); } return v; }; //初始化值 function initValue(target) { var options = $.data(target, "numberbox").options; var fn = options.onChange; options.onChange = function () { }; _fixValue(target, options.parser.call(target, options.value)); options.onChange = fn; options.originalValue = _getValue(target); }; //获取值 function _getValue(target) { return $.data(target, "numberbox").field.val(); }; //修正值 function _fixValue(target, val) { var numberbox = $.data(target, "numberbox"); var options = numberbox.options; var value = _getValue(target); val = options.parser.call(target, val); options.value = val; numberbox.field.val(val); $(target).val(options.formatter.call(target, val)); if (value != val) { options.onChange.call(target, val, value); } }; //绑定事件 function bindEvents(jq) { var options = $.data(jq, "numberbox").options; $(jq).unbind(".numberbox").bind("keypress.numberbox", function (e) { if (e.which == 45) { if ($(this).val().indexOf("-") == -1) { return true; } else { return false; } } if (e.which == 46) { if ($(this).val().indexOf(".") == -1) { return true; } else { return false; } } else { if ((e.which >= 48 && e.which <= 57 && e.ctrlKey == false && e.shiftKey == false) || e.which == 0 || e.which == 8) { return true; } else { if (e.ctrlKey == true && (e.which == 99 || e.which == 118)) { return true; } else { return false; } } } }).bind("blur.numberbox", function () { _fixValue(jq, $(this).val()); $(this).val(options.formatter.call(jq, _getValue(jq))); }).bind("focus.numberbox", function () { var vv = _getValue(jq); if ($(this).val() != vv) { $(this).val(vv); } }); }; //数据验证 function validate(jq) { if ($.fn.validatebox) { var options = $.data(jq, "numberbox").options; $(jq).validatebox(options); } }; //设置禁用 function disable(jq, disabled) { var options = $.data(jq, "numberbox").options; if (disabled) { options.disabled = true; $(jq).attr("disabled", true); } else { options.disabled = false; $(jq).removeAttr("disabled"); } }; //实例化组件 $.fn.numberbox = function (target, parm) { if (typeof target == "string") { var method = $.fn.numberbox.methods[target]; if (method) { return method(this, parm); } else { return this.validatebox(target, parm); } } target = target || {}; return this.each(function () { var numberbox = $.data(this, "numberbox"); if (numberbox) { $.extend(numberbox.options, target); } else { numberbox = $.data(this, "numberbox", { options: $.extend({}, $.fn.numberbox.defaults, $.fn.numberbox.parseOptions(this), target), field: hiddenField(this) }); $(this).removeAttr("disabled"); $(this).css({ imeMode: "disabled" }); } disable(this, numberbox.options.disabled); bindEvents(this); validate(this); initValue(this); }); }; //默认方法 $.fn.numberbox.methods = { //返回数值输入框属性 options: function (jq) { return $.data(jq[0], "numberbox").options; }, //销毁数值输入框对象 destroy: function (jq) { return jq.each(function () { $.data(this, "numberbox").field.remove(); $(this).validatebox("destroy"); $(this).remove(); }); }, //禁用字段 disable: function (jq) { return jq.each(function () { disable(this, true); }); }, //启用字段 enable: function (jq) { return jq.each(function () { disable(this, false); }); }, //将输入框中的值修正为有效的值 fix: function (jq) { return jq.each(function () { _fixValue(this, $(this).val()); }); }, //设置数值输入框的值 setValue: function (jq, value) { return jq.each(function () { _fixValue(this, value); }); }, //获取数值输入框的值 getValue: function (jq) { return _getValue(jq[0]); }, //清楚数值输入框的值 clear: function (jq) { return jq.each(function () { var numberbox = $.data(this, "numberbox"); numberbox.field.val(""); $(this).val(""); }); }, //重置数值输入框的值 reset: function (jq) { return jq.each(function () { var options = $(this).numberbox("options"); $(this).numberbox("setValue", options.originalValue); }); } }; //解析器配置 $.fn.numberbox.parseOptions = function (target) { var t = $(target); return $.extend({}, $.fn.validatebox.parseOptions(target), $.parser.parseOptions(target, ["decimalSeparator", "groupSeparator", "suffix", { min: "number", max: "number", precision: "number" }]), { prefix: (t.attr("prefix") ? t.attr("prefix") : undefined), disabled: (t.attr("disabled") ? true : undefined), value: (t.val() || undefined) }); }; //默认属性和事件 $.fn.numberbox.defaults = $.extend({}, $.fn.validatebox.defaults, { disabled: false,//是否禁用该字段 value: "",//默认值 min: null,//允许的最小值 max: null,//允许的最大值 precision: 0,//在十进制分隔符之后显示的最大精度。（即小数点后的显示精度） decimalSeparator: ".",//使用哪一种十进制字符分隔数字的整数和小数部分 //使用哪一种字符分割整数组，以显示成千上万的数据。(比如：99,999,999.00中的','就是该分隔符设置。) groupSeparator: "", prefix: "",//前缀字符。(比如：金额的$或者￥) suffix: "",//后缀字符。(比如：后置的欧元符号€) //用于格式化数值的函数。返回字符串值以显示到输入框中 formatter: function (param) { if (!param) { return param; } param = param + ""; var opts = $(this).numberbox("options"); var intNum = param, decNum = ""; var pointIndex = param.indexOf("."); if (pointIndex >= 0) { intNum = param.substring(0, pointIndex); decNum = param.substring(pointIndex + 1, param.length); } if (opts.groupSeparator) { var p = /(\d+)(\d{3})/; while (p.test(intNum)) { intNum = intNum.replace(p, "$1" + opts.groupSeparator + "$2"); } } if (decNum) { return opts.prefix + intNum + opts.decimalSeparator + decNum + opts.suffix; } else { return opts.prefix + intNum + opts.suffix; } }, //用于解析字符串的函数。返回数值 parser: function (s) { s = s + ""; var opts = $(this).numberbox("options"); if (opts.groupSeparator) { s = s.replace(new RegExp("\\" + opts.groupSeparator, "g"), ""); } if (opts.decimalSeparator) { s = s.replace(new RegExp("\\" + opts.decimalSeparator, "g"), "."); } if (opts.prefix) { s = s.replace(new RegExp("\\" + $.trim(opts.prefix), "g"), ""); } if (opts.suffix) { s = s.replace(new RegExp("\\" + $.trim(opts.suffix), "g"), ""); } s = s.replace(/\s/g, ""); var val = parseFloat(s).toFixed(opts.precision); if (isNaN(val)) { val = ""; } else { if (typeof (opts.min) == "number" && val < opts.min) { val = opts.min.toFixed(opts.precision); } else { if (typeof (opts.max) == "number" && val > opts.max) { val = opts.max.toFixed(opts.precision); } } } return val; }, onChange: function (newValue, oldValue) { } }); })(jQuery);
示例代码
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Basic NumberBox - jQuery EasyUI Demo</title> <link rel="stylesheet" type="text/css" href="../../themes/default/easyui.css"> <link rel="stylesheet" type="text/css" href="../../themes/icon.css"> <link rel="stylesheet" type="text/css" href="../demo.css"> <script type="text/javascript" src="../../jquery-1.8.0.min.js"></script> <script src="../../plugins2/jquery.parser.js"></script> <script src="../../plugins2/jquery.validatebox.js"></script> <script src="../../plugins2/jquery.numberbox.js"></script> </head> <body> <h2>Basic NumberBox</h2> <div class="demo-info"> <div class="demo-tip icon-tip"></div> <div>The Box can only input number.</div> </div> <div style="margin:10px 0;"></div> <input class="easyui-numberbox" required data-options=" onChange: function(value){ $('#vv').text(value); }"> <div style="margin:10px 0;"> Value: <span id="vv"></span> </div> </body> </html>
插件效果
