text/web/lay/modules/slider.js

/** layui-v2.5.6 MIT License By https://www.layui.com */
;layui.define("jquery", function(e) {
    "use strict";

    var i = layui.jquery,
        t = {
            config: {},
            index: layui.slider ? layui.slider.index + 1e4 : 0,
            set: function(e) {
                var t = this;
                return t.config = i.extend({}, t.config, e), t;
            },
            on: function(e, i) {
                return layui.onevent.call(this, n, e, i);
            }
        },
        a = function() {
            var e = this, i = e.config;
            return {
                setValue: function(i, t) {
                    return e.slide("set", i, t || 0);
                },
                config: i
            };
        },
        n = "slider", // 组件名称
        l = "layui-disabled", // 禁用状态的样式类
        s = "layui-slider", // 滑块的基本样式类
        r = "layui-slider-bar", // 滑块条样式类
        o = "layui-slider-wrap", // 滑块容器样式类
        u = "layui-slider-wrap-btn", // 滑块按钮样式类
        d = "layui-slider-tips", // 提示信息样式类
        v = "layui-slider-input", // 输入框样式类
        c = "layui-slider-input-txt", // 输入框文字样式类
        m = "layui-slider-input-btn", // 输入框按钮样式类
        p = "layui-slider-hover", // 滑块悬停样式类

        f = function(e) {
            var a = this;
            a.index = ++t.index;
            a.config = i.extend({}, a.config, t.config, e);
            a.render();
        };

    // 滑块配置项
    f.prototype.config = {
        type: "default", // 默认类型
        min: 0, // 最小值
        max: 100, // 最大值
        value: 0, // 当前值
        step: 1, // 步长
        showstep: !1, // 是否显示步长
        tips: !0, // 是否显示提示信息
        input: !1, // 是否显示输入框
        range: !1, // 是否为范围选择
        height: 200, // 滑块的高度（垂直方向）
        disabled: !1, // 是否禁用
        theme: "#009688" // 自定义主题颜色
    };

    // 渲染滑块
    f.prototype.render = function() {
        var e = this, t = e.config;

        // 如果步长小于1，设置为1
        if (t.step < 1) {
            t.step = 1;
        }

        // 如果最大值小于最小值，交换二者
        if (t.max < t.min) {
            t.max = t.min + t.step;
        }

        // 范围模式（两个滑块）
        if (t.range) {
            t.value = "object" == typeof t.value ? t.value : [t.min, t.value];
            var a = Math.min(t.value[0], t.value[1]),
                n = Math.max(t.value[0], t.value[1]);
            t.value[0] = a > t.min ? a : t.min;
            t.value[1] = n > t.min ? n : t.min;
            t.value[0] = t.value[0] > t.max ? t.max : t.value[0];
            t.value[1] = t.value[1] > t.max ? t.max : t.value[1];

            var r = Math.floor((t.value[0] - t.min) / (t.max - t.min) * 100),
                v = Math.floor((t.value[1] - t.min) / (t.max - t.min) * 100),
                m = v - r + "%";
            r += "%";
            v += "%";
        } else {
            // 单个滑块模式
            if ("object" == typeof t.value) {
                t.value = Math.min.apply(null, t.value);
            }
            t.value < t.min && (t.value = t.min);
            t.value > t.max && (t.value = t.max);

            var m = Math.floor((t.value - t.min) / (t.max - t.min) * 100) + "%";
        }

        // 设置禁用样式和主题颜色
        var p = t.disabled ? "#c2c2c2" : t.theme;

        // 生成滑块的HTML结构
        var f = '<div class="layui-slider ' + ("vertical" === t.type ? "layui-slider-vertical" : "") + '">' +
            (t.tips ? '<div class="layui-slider-tips"></div>' : "") +
            '<div class="layui-slider-bar" style="background:' + p + "; " + ("vertical" === t.type ? "height" : "width") + ":" + m + ";" + ("vertical" === t.type ? "bottom" : "left") + ":" + (r || 0) + '"></div>' +
            '<div class="layui-slider-wrap" style="' + ("vertical" === t.type ? "bottom" : "left") + ":" + (r || m) + ';">' +
            '<div class="layui-slider-wrap-btn" style="border: 2px solid ' + p + ';"></div>' +
            '</div>' +
            (t.range ? '<div class="layui-slider-wrap" style="' + ("vertical" === t.type ? "bottom" : "left") + ":" + v + ';">' +
                '<div class="layui-slider-wrap-btn" style="border: 2px solid ' + p + ';"></div>' +
                '</div>' : "") +
            "</div>";

        var h = i(t.elem),
            y = h.next("."+s);

        // 如果已经渲染过，先移除之前的
        if (y[0] && y.remove()) {}

        e.elemTemp = i(f);
        t.range ? (e.elemTemp.find("."+o).eq(0).data("value", t.value[0]), e.elemTemp.find("."+o).eq(1).data("value", t.value[1])) :
            e.elemTemp.find("."+o).data("value", t.value);
        h.html(e.elemTemp);

        // 垂直滑块的高度设置
        if ("vertical" === t.type) {
            e.elemTemp.height(t.height + "px");
        }

        // 显示步长（如果配置了）
        if (t.showstep) {
            for (var g = (t.max - t.min) / t.step, b = "", x = 1; x < g + 1; x++) {
                var T = 100 * x / g;
                T < 100 && (b += '<div class="layui-slider-step" style="' + ("vertical" === t.type ? "bottom" : "left") + ":" + T + '%"></div>');
            }
            e.elemTemp.append(b);
        }

        // 显示输入框
        if (t.input && !t.range) {
            var w = i('<div class="layui-slider-input layui-input"><div class="layui-slider-input-txt"><input type="text" class="layui-input"></div><div class="layui-slider-input-btn"><i class="layui-icon layui-icon-up"></i><i class="layui-icon layui-icon-down"></i></div></div>');
            h.css("position", "relative");
            h.append(w);
            h.find("."+c).children("input").val(t.value);
            "vertical" === t.type ? w.css({ left: 0, top: -48 }) : e.elemTemp.css("margin-right", w.outerWidth() + 15);
        }

        // 如果禁用，添加禁用样式
        t.disabled ? (e.elemTemp.addClass(l), e.elemTemp.find("."+u).addClass(l)) : e.slide();

        // 滑块按钮悬停事件
        e.elemTemp.find("."+u).on("mouseover", function() {
            var a = "vertical" === t.type ? t.height : e.elemTemp[0].offsetWidth,
                n = e.elemTemp.find("."+o),
                l = "vertical" === t.type ? a - i(this).parent()[0].offsetTop - n.height() : i(this).parent()[0].offsetLeft,
                s = l / a * 100,
                r = i(this).parent().data("value"),
                u = t.setTips ? t.setTips(r) : r;
            e.elemTemp.find("."+d).html(u);
            "vertical" === t.type ? e.elemTemp.find("."+d).css({ bottom: s + "%", "margin-bottom": "20px", display: "inline-block" }) :
                e.elemTemp.find("."+d).css({ left: s + "%", display: "inline-block" });
        }).on("mouseout", function() {
            e.elemTemp.find("."+d).css("display", "none");