easyui源码翻译1.32--TimeSpinner（时间微调）

前言

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

时间微调组件的创建基于微调组件。它和数字微调类似，但是显示的时间值。时间微调组件允许用户点击组件右侧的小按钮来增加或减少时间

源码

/**
 * jQuery EasyUI 1.3.2
 * qq：1364386878
 *日期微调
 *
 */
(function ($) {
    //初始化timeSpinner
    function init(jq) {
        var options = $.data(jq, "timespinner").options;
        $(jq).addClass("timespinner-f");
        $(jq).spinner(options);
        $(jq).unbind(".timespinner");
        $(jq).bind("click.timespinner", function () {
            var start = 0;
            if (this.selectionStart != null) {
                start = this.selectionStart;
            } else {
                if (this.createTextRange) {
                    var range = jq.createTextRange();
                    var s = document.selection.createRange();
                    s.setEndPoint("StartToStart", range);
                    start = s.text.length;
                }
            }
            if (start >= 0 && start <= 2) {
                options.highlight = 0;
            } else {
                if (start >= 3 && start <= 5) {
                    options.highlight = 1;
                } else {
                    if (start >= 6 && start <= 8) {
                        options.highlight = 2;
                    }
                }
            }
            highlight(jq);//初始选中的字段
        }).bind("blur.timespinner", function () {
            _setValue(jq);//设置时间微调组件的值
        });
    };
    //初始选中的字段
    function highlight(jq) {
        var options = $.data(jq, "timespinner").options;
        var start = 0, end = 0;
        if (options.highlight == 0) {
            start = 0;
            end = 2;
        } else {
            if (options.highlight == 1) {
                start = 3;
                end = 5;
            } else {
                if (options.highlight == 2) {
                    start = 6;
                    end = 8;
                }
            }
        }
        if (jq.selectionStart != null) {
            jq.setSelectionRange(start, end);
        } else {
            if (jq.createTextRange) {
                var range = jq.createTextRange();
                range.collapse();
                range.moveEnd("character", end);
                range.moveStart("character", start);
                range.select();
            }
        }
        $(jq).focus();
    };
    //解析时间
    function parseTime(jq, value) {
        var options = $.data(jq, "timespinner").options;
        if (!value) {
            return null;
        }
        var separators = value.split(options.separator);
        for (var i = 0; i < separators.length; i++) {
            if (isNaN(separators[i])) {
                return null;
            }
        }
        while (separators.length < 3) {
            separators.push(0);
        }
        return new Date(1900, 0, 0, separators[0], separators[1], separators[2]);
    };
    // 设定timespinner的值
    function _setValue(jq) {
        var options = $.data(jq, "timespinner").options;
        var val = $(jq).val();
        var time = parseTime(jq, val);
        if (!time) {
            time = parseTime(jq, options.value);
        }
        if (!time) {
            options.value = "";
            $(jq).val("");
            return;
        }
        var minTime = parseTime(jq, options.min);
        var maxTime = parseTime(jq, options.max);
        if (minTime && minTime > time) {
            time = minTime;
        }
        if (maxTime && maxTime < time) {
            time = maxTime;
        }
        var tt = [minTime(time.getHours()), minTime(time.getMinutes())];
        if (options.showSeconds) {
            tt.push(minTime(time.getSeconds()));
        }
        var val = tt.join(options.separator);
        options.value = val;
        $(jq).val(val);
        function minTime(value) {
            return (value < 10 ? "0" : "") + value;
        };
    };
    //用户点击spinner按钮触发一个方法
    function clickSpinner(jq, down) {
        var options = $.data(jq, "timespinner").options;
        var val = $(jq).val();
        if (val == "") {
            val = [0, 0, 0].join(options.separator);
        }
        var separators = val.split(options.separator);
        for (var i = 0; i < separators.length; i++) {
            separators[i] = parseInt(separators[i], 10);
        }
        if (down == true) {
            separators[options.highlight] -= options.increment;
        } else {
            separators[options.highlight] += options.increment;
        }
        $(jq).val(separators.join(options.separator));
        _setValue(jq);
        highlight(jq);
    };
    //实例化函数
    $.fn.timespinner = function (options, param) {
        if (typeof options == "string") {
            var method = $.fn.timespinner.methods[options];
            if (method) {
                return method(this, param);
            } else {
                return this.spinner(options, param);
            }
        }
        options = options || {};
        return this.each(function () {
            var timespinner = $.data(this, "timespinner");
            if (timespinner) {
                $.extend(timespinner.options, options);
            } else {
                $.data(this, "timespinner", {
                    options: $.extend({}, $.fn.timespinner.defaults,
                        $.fn.timespinner.parseOptions(this), options)
                });
                init(this);
            }
        });
    };
    //默认方法
    $.fn.timespinner.methods = {
        //返回属性对象
        options: function (jq) {
            var options = $.data(jq[0], "timespinner").options;
            return $.extend(options, {
                value: jq.val(),
                originalValue: jq.spinner("options").originalValue
            });
        },
        //设置时间微调组件的值
        setValue: function (jq, value) {
            return jq.each(function () {
                $(this).val(value);
                _setValue(this);
            });
        },
        //设置时间微调组件的值
        getHours: function (jq) {
            var options = $.data(jq[0], "timespinner").options;
            var separators = jq.val().split(options.separator);
            return parseInt(separators[0], 10);
        },
        //获取当前的分钟数
        getMinutes: function (jq) {
            var options = $.data(jq[0], "timespinner").options;
            var separators = jq.val().split(options.separator);
            return parseInt(separators[1], 10);
        },
        //获取当前的秒数
        getSeconds: function (jq) {
            var options = $.data(jq[0], "timespinner").options;
            var separators = jq.val().split(options.separator);
            return parseInt(separators[2], 10) || 0;
        }
    };
    //解析器参数
    $.fn.timespinner.parseOptions = function (target) {
        return $.extend({}, $.fn.spinner.parseOptions(target),
            $.parser.parseOptions(target,
            ["separator", { showSeconds: "boolean", highlight: "number" }]));
    };
    //默认属性和事件  并继承spinner
    $.fn.timespinner.defaults = $.extend({},
        $.fn.spinner.defaults, {
            separator: ":",//定义在小时、分钟和秒之间的分隔符
            showSeconds: false,//定义是否显示秒钟信息
            highlight: 0,//初始选中的字段 0=小时,1=分钟.
            //在用户点击微调按钮的时候调用的函数。'down'参数对应用户点击的向下按钮
            spin: function (down) {
                clickSpinner(this, down);
        }
    });
})(jQuery);

 

示例代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Basic TimeSpinner - 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.timespinner.js"></script>
</head>
<body>
    <h2>Basic TimeSpinner</h2>
    <div class="demo-info">
        <div class="demo-tip icon-tip"></div>
        <div>Click spin button to adjust time.</div>
    </div>
    <div style="margin:10px 0;"></div>
    <input class="easyui-timespinner" style="width:80px;">
</body>
</html>

 

插件效果