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

 

插件效果

easyui源码翻译1.32--NumberSpinner(数字微调)

你可能感兴趣的:(Spinner)