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>

插件效果