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>

巴特西

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

前言

源码

示例代码

插件效果

最新文章

热门文章