easyui源码翻译1.32--NumberSpinner（数字微调）

前言

扩展自$.fn.spinner.defaults和$.fn.numberbox.defaults。使用$.fn.numberspinner.defaults重写默认值对象。下载该插件翻译源码

数字微调控件的创建是基于微调控件和数值输入框控件的。他可以转换输入的值，比如：数值、百分比、货币等。它也允许使用上/下微调按钮调整到用户的期望值

源码

/**
 * jQuery EasyUI 1.3.2
 * 
 *翻译：qq 1364386878 数字微调
 */
(function ($) {
    //创建
    function createNumberspinner(jq) {
        $(jq).addClass("numberspinner-f");
        var opts = $.data(jq, "numberspinner").options;
        $(jq).spinner(opts).numberbox(opts);
    };
    //在用户点击微调按钮的时候调用的函数。'down'参数对应用户点击的向下按钮
    function _spin(jq, down) {
        var options = $.data(jq, "numberspinner").options;
        var v = parseFloat($(jq).numberbox("getValue") || options.value) || 0;
        if (down == true) {
            v -= options.increment;
        } else {
            v += options.increment;
        }
        $(jq).numberbox("setValue", v);
    };
    //实例化组件
    $.fn.numberspinner = function (target, parm) {
        if (typeof target == "string") {
            var method = $.fn.numberspinner.methods[target];
            if (method) {
                return method(this, parm);
            } else {
                return this.spinner(target, parm);
            }
        }
        target = target || {};
        return this.each(function () {
            var numberspinner = $.data(this, "numberspinner");
            if (numberspinner) {
                $.extend(numberspinner.options, target);
            } else {
                $.data(this, "numberspinner", {
                    options: $.extend({},
                        $.fn.numberspinner.defaults,
                        $.fn.numberspinner.parseOptions(this), target)
                });
            }
            createNumberspinner(this);
        });
    };
    //默认方法
    $.fn.numberspinner.methods = {
        //返回属性对象
        options: function (jq) {
            var options = $.data(jq[0], "numberspinner").options;
            return $.extend(options, {
                value: jq.numberbox("getValue"),
                originalValue: jq.numberbox("options").originalValue
            });
        },
        //设置数字微调控件的值
        setValue: function (jq, value) {
            return jq.each(function () {
                $(this).numberbox("setValue", value);
            });
        },
        //获取值
        getValue: function (jq) {
            return jq.numberbox("getValue");
        },
        //清空组件值
        clear: function (jq) {
            return jq.each(function () {
                $(this).spinner("clear");
                $(this).numberbox("clear");
            });
        },
        //重置组件值
        reset: function (jq) {
            return jq.each(function () {
                var _e = $(this).numberspinner("options");
                $(this).numberspinner("setValue", _e.originalValue);
            });
        }
    };
    //解析器配置
    $.fn.numberspinner.parseOptions = function (target) {
        return $.extend({}, $.fn.spinner.parseOptions(target),
            $.fn.numberbox.parseOptions(target), {});
    };
    //默认属性  继承了spinner numberbox的属性和事件
    $.fn.numberspinner.defaults = $.extend({}, $.fn.spinner.defaults,
        $.fn.numberbox.defaults, {
            //在用户点击微调按钮的时候调用的函数。'down'参数对应用户点击的向下按钮
        spin: function (down) {
            _spin(this, down);
        }
    });
})(jQuery);
View Code

 

示例代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Basic NumberSpinner - 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.spinner.js"></script>
    <script src="../../plugins2/jquery.numberbox.js"></script>
    <script src="../../plugins2/jquery.numberspinner.js"></script>
</head>
<body>
    <h2>Basic NumberSpinner</h2>
    <div class="demo-info">
        <div class="demo-tip icon-tip"></div>
        <div>Click spinner button to change value.</div>
    </div>
    <div style="margin:10px 0;"></div>
    <input class="easyui-numberspinner" style="width:80px;" data-options="
                onChange: function(value){
                    $('#vv').text(value);
                }
            "></input>
    <div style="margin:10px 0;">
        Value: <span id="vv"></span>
    </div>
</body>
</html>
View Code

 

插件效果

posted @ 2014-01-01 18:32  Jimmy-Lee  阅读(864)  评论(0)  编辑  收藏  举报