easyui源码翻译1.32--Slider（滑动条）

前言

使用$.fn.slider.defaults重写默认值对象。下载该插件翻译源码

滑动条允许用户从一个有限的范围内选择一个数值。当滑块控件沿着轨道移动的时候，将会显示一个提示来表示当前值。用户可以通过设置其属性自定义滑块

源码

/**
 * jQuery EasyUI 1.3.2
 * 
 *翻译：qq 1364386878 滑动条
 */
(function ($) {
    //初始化
    function init(jq) {
        var html = $("<div class=\"slider\">"
            + "<div class=\"slider-inner\">"
            + "<a href=\"javascript:void(0)\" class=\"slider-handle\"></a>"
            + "<span class=\"slider-tip\"></span>"
            + "</div>"
            + "<div class=\"slider-rule\"></div>"
            + "<div class=\"slider-rulelabel\"></div>"
            + "<div style=\"clear:both\"></div>"
            + "<input type=\"hidden\" class=\"slider-value\">"
            + "</div>").insertAfter(jq);
        var name = $(jq).hide().attr("name");
        if (name) {
            html.find("input.slider-value").attr("name", name);
            $(jq).removeAttr("name").attr("sliderName", name);
        }
        return html;
    };
    //调整大小
    function _resize(jq, parm) {
        var options = $.data(jq, "slider").options;
        var slider = $.data(jq, "slider").slider;
        if (parm) {
            if (parm.width) {
                options.width = parm.width;
            }
            if (parm.height) {
                options.height = parm.height;
            }
        }
        if (options.mode == "h") {
            slider.css("height", "");
            slider.children("div").css("height", "");
            if (!isNaN(options.width)) {
                slider.width(options.width);
            }
        } else {
            slider.css("width", "");
            slider.children("div").css("width", "");
            if (!isNaN(options.height)) {
                slider.height(options.height);
                slider.find("div.slider-rule").height(options.height);
                slider.find("div.slider-rulelabel").height(options.height);
                slider.find("div.slider-inner")._outerHeight(options.height);
            }
        }
        _a(jq);
    };

    function _b(jq) {
        var options = $.data(jq, "slider").options;
        var slider = $.data(jq, "slider").slider;
        var mode = options.mode == "h" ? options.rule : options.rule.slice(0).reverse();
        if (options.reversed) {
            mode = mode.slice(0).reverse();
        }
        _f(mode);
        function _f(mode) {
            var rule = slider.find("div.slider-rule");
            var rulelabel = slider.find("div.slider-rulelabel");
            rule.empty();
            rulelabel.empty();
            for (var i = 0; i < mode.length; i++) {
                var _12 = i * 100 / (mode.length - 1) + "%";
                var span = $("<span></span>").appendTo(rule);
                span.css((options.mode == "h" ? "left" : "top"), _12);
                if (mode[i] != "|") {
                    span = $("<span></span>").appendTo(rulelabel);
                    span.html(mode[i]);
                    if (options.mode == "h") {
                        span.css({ left: _12, marginLeft: -Math.round(span.outerWidth() / 2) });
                    } else {
                        span.css({ top: _12, marginTop: -Math.round(span.outerHeight() / 2) });
                    }
                }
            }
        };
    };
    //设置是否禁用
    function _setdisable(jq) {
        var options = $.data(jq, "slider").options;
        var slider = $.data(jq, "slider").slider;
        slider.removeClass("slider-h slider-v slider-disabled");
        slider.addClass(options.mode == "h" ? "slider-h" : "slider-v");
        slider.addClass(options.disabled ? "slider-disabled" : "");
        slider.find("a.slider-handle").draggable({
            axis: options.mode, cursor: "pointer", disabled: options.disabled, onDrag: function (e) {
                var left = e.data.left;
                var width = slider.width();
                if (options.mode != "h") {
                    left = e.data.top;
                    width = slider.height();
                }
                if (left < 0 || left > width) {
                    return false;
                } else {
                    var _1a = _2c(jq, left);
                    _1b(_1a);
                    return false;
                }
            }, onStartDrag: function () {
                options.onSlideStart.call(jq, options.value);
            }, onStopDrag: function (e) {
                var _1c = _2c(jq, (options.mode == "h" ? e.data.left : e.data.top));
                _1b(_1c);
                options.onSlideEnd.call(jq, options.value);
            }
        });
        function _1b(_1d) {
            var s = Math.abs(_1d % options.step);
            if (s < options.step / 2) {
                _1d -= s;
            } else {
                _1d = _1d - s + options.step;
            }
            _setValue(jq, _1d);
        };
    };
    function _setValue(_1f, _20) {
        var _21 = $.data(_1f, "slider").options;
        var _22 = $.data(_1f, "slider").slider;
        var _23 = _21.value;
        if (_20 < _21.min) {
            _20 = _21.min;
        }
        if (_20 > _21.max) {
            _20 = _21.max;
        }
        _21.value = _20;
        $(_1f).val(_20);
        _22.find("input.slider-value").val(_20);
        var pos = _24(_1f, _20);
        var tip = _22.find(".slider-tip");
        if (_21.showTip) {
            tip.show();
            tip.html(_21.tipFormatter.call(_1f, _21.value));
        } else {
            tip.hide();
        }
        if (_21.mode == "h") {
            var _25 = "left:" + pos + "px;";
            _22.find(".slider-handle").attr("style", _25);
            tip.attr("style", _25 + "margin-left:" + (-Math.round(tip.outerWidth() / 2)) + "px");
        } else {
            var _25 = "top:" + pos + "px;";
            _22.find(".slider-handle").attr("style", _25);
            tip.attr("style", _25 + "margin-left:" + (-Math.round(tip.outerWidth())) + "px");
        }
        if (_23 != _20) {
            _21.onChange.call(_1f, _20, _23);
        }
    };
    function _a(_26) {
        var _27 = $.data(_26, "slider").options;
        var fn = _27.onChange;
        _27.onChange = function () {
        };
        _setValue(_26, _27.value);
        _27.onChange = fn;
    };
    function _24(_28, _29) {
        var _2a = $.data(_28, "slider").options;
        var _2b = $.data(_28, "slider").slider;
        if (_2a.mode == "h") {
            var pos = (_29 - _2a.min) / (_2a.max - _2a.min) * _2b.width();
            if (_2a.reversed) {
                pos = _2b.width() - pos;
            }
        } else {
            var pos = _2b.height() - (_29 - _2a.min) / (_2a.max - _2a.min) * _2b.height();
            if (_2a.reversed) {
                pos = _2b.height() - pos;
            }
        }
        return pos.toFixed(0);
    };
    function _2c(_2d, pos) {
        var _2e = $.data(_2d, "slider").options;
        var _2f = $.data(_2d, "slider").slider;
        if (_2e.mode == "h") {
            var _30 = _2e.min + (_2e.max - _2e.min) * (pos / _2f.width());
        } else {
            var _30 = _2e.min + (_2e.max - _2e.min) * ((_2f.height() - pos) / _2f.height());
        }
        return _2e.reversed ? _2e.max - _30.toFixed(0) : _30.toFixed(0);
    };
    //实例化组件
    $.fn.slider = function (target, parm) {
        if (typeof target == "string") {
            return $.fn.slider.methods[target](this, parm);
        }
        target = target || {};
        return this.each(function () {
            var slider = $.data(this, "slider");
            if (slider) {
                $.extend(slider.options, target);
            } else {
                slider = $.data(this, "slider", {
                    options: $.extend({},
                        $.fn.slider.defaults, $.fn.slider.parseOptions(this), target),
                    slider: init(this)
                });
                $(this).removeAttr("disabled");
            }
            _setdisable(this);
            _b(this);
            _resize(this);
        });
    };
    //默认方法
    $.fn.slider.methods = {
        //返回滑动条属性
        options: function (jq) {
            return $.data(jq[0], "slider").options;
        },
        //返回滑动条属性
        destroy: function (jq) {
            return jq.each(function () {
                $.data(this, "slider").slider.remove();
                $(this).remove();
            });
        },
        //设置滑动条大小
        resize: function (jq, parm) {
            return jq.each(function () {
                _resize(this, parm);
            });
        },
        //获取滑动条的值
        getValue: function (jq) {
            return jq.slider("options").value;
        },
        //获取滑动条的值
        setValue: function (jq, value) {
            return jq.each(function () {
                _setValue(this, value);
            });
        },
        //启用滑动条控件
        enable: function (jq) {
            return jq.each(function () {
                $.data(this, "slider").options.disabled = false;
                _setdisable(this);
            });
        },
        //启用滑动条控件
        disable: function (jq) {
            return jq.each(function () {
                $.data(this, "slider").options.disabled = true;
                _setdisable(this);
            });
        }
    };
    //解析器
    $.fn.slider.parseOptions = function (target) {
        var t = $(target);
        return $.extend({}, $.parser.parseOptions(target, ["width", "height", "mode",
            {
                reversed: "boolean",
                showTip: "boolean",
                min: "number",
                max: "number",
                step: "number"
            }]),
            {
                value: (t.val() || undefined),
                disabled: (t.attr("disabled") ? true : undefined),
                rule: (t.attr("rule") ? eval(t.attr("rule")) : undefined)
            });
    };
    //默认属性和事件
    $.fn.slider.defaults = {
        width: "auto",//滑动条宽度
        height: "auto",//滑动条高度
        mode: "h",//滑动条高度
        reversed: false,//设置为true时，最小值和最大值将对调他们的位置
        showTip: false,//定义是否显示值信息提示
        disabled: false,//定义是否禁用滑动条
        value: 0,//默认值
        min: 0,//允许的最小值
        max: 100,//允许的最大值
        step: 1,//值增加或减少
        rule: [],//显示标签旁边的滑块，'|' — 只显示一行
        //显示标签旁边的滑块，'|' — 只显示一行
        tipFormatter: function (jq) {
            return jq;
        },
        //在字段值更改的时候触发
        onChange: function (_38, _39) {
        },
        //在开始拖拽滑动条的时候触发
        onSlideStart: function (_3a) {
        },
        //在结束拖拽滑动条的时候触发
        onSlideEnd: function (_3b) {
        }
    };
})(jQuery);

 

示例代码

 

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Basic Slider - 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.draggable.js"></script>
    <script src="../../plugins2/jquery.slider.js"></script>
</head>
<body>
    <h2>Basic Slider</h2>
    <div class="demo-info">
        <div class="demo-tip icon-tip"></div>
        <div>Drag the slider to change value.</div>
    </div>
    <div style="margin:10px 0;"></div>
    <div style="margin-top:20px;">
        <input class="easyui-slider" style="width:300px" data-options="showTip:true">
    </div>
</body>
</html>

 

插件效果