给easyui的progressbar添加设置text和背景颜色的方法

问题背景：当前版本的easyui样式太单一，无法满足项目中的各种个性化需求

接着上一篇关于easyui的文章，记得之前的easyui版本还是支持设置背景颜色的，博主用的是最新版

的EasyUI for jQuery 1.9.15

这个版本在元素上添加颜色相关的样式是不生效的，因为easyui会重新渲染元素，给当前元素添加一个progressbar的class，所以想要在动态的设置元素的颜色和背景颜色，只能在easyui渲染元素之后重新设置background-color和color样式。

直接贴上代码：

/**
 * progressbar组件
 */
(function ($) {
    function init(selector) {
        $(selector).addClass("progressbar");
        $(selector).html(
            "<div class='progressbar-text'></div>" +
            "<div class='progressbar-value'>" +
                "<div class='progressbar-text'></div>" +
            "</div>"
        );
        $(selector)._bind("_resize", function (e, size) {
            if ($(this).hasClass("easyui-fluid") || size) {
                _1e8(selector);
            }
            return false;
        });

        return $(selector);
    };

    function _1e8(_1e9, width) {
        var opts = $.data(_1e9, "progressbar").options;
        var bar = $.data(_1e9, "progressbar").bar;

        if (width) {
            opts.width = width;
        }
        bar._size(opts);

        bar.find("div.progressbar-text").css("width", bar.width());
        bar.find("div.progressbar-value").css("width", opts.percent + "%");
        bar.find("div.progressbar-text,div.progressbar-value").css({
            height: bar.height() + "px",
            lineHeight: bar.height() + "px"
        });
    };

    $.fn.progressbar = function (_1eb, _1ec) {
        if (typeof _1eb == "string") {
            var _1ed = $.fn.progressbar.methods[_1eb];

            if (_1ed) {
                return _1ed(this, _1ec);
            }
        }
        _1eb = _1eb || {};

        return this.each(function () {
            var _1ee = $.data(this, "progressbar");

            if (_1ee) {
                $.extend(_1ee.options, _1eb);
            } else {
                _1ee = $.data(this, "progressbar", {
                    options: $.extend({}, $.fn.progressbar.defaults, $.fn.progressbar.parseOptions(this), _1eb),
                    bar: init(this)
                });
            }
            $(this).progressbar("setValue", _1ee.options.value);
            _1e8(this);
        });
    };

    $.fn.progressbar.methods = {
        options: function (jq) {
            return $.data(jq[0], "progressbar").options;
        },
        /**
         * 重新调整组建的尺寸
         * @param jq
         * @param size
         * @returns {*}
         */
        resize: function (jq, size) {
            return jq.each(function () {
                _1e8(this, size);
            });
        },
        /**
         * 获取组件的值
         * @param jq
         */
        getValue: function (jq) {
            return $.data(jq[0], "progressbar").options.value;
        },
        /**
         * 设置组件的值
         * @param jq
         * @param value
         */
        setValue: function (jq, value) {
            if (value < 0) {
                value = 0;
            }

            return jq.each(function () {
                var opts = $.data(this, "progressbar").options;
                var text = opts.text.replace(/{value}/, value);
                var oldValue = opts.value;
                var percent = opts.percent;

                if (!percent) {
                    percent = 100;
                }
                opts.value = value;

                $(this).find("div.progressbar-value").width(percent + "%");
                $(this).find("div.progressbar-text").html(text);

                // 前后两个值不一样时，才调用onchange()方法
                if (oldValue != value) {
                    opts.onChange.call(this, value, oldValue);
                }
            });
        },
        /**
         * 设置进度条的百分比
         * @param jq
         * @param percent
         */
        setText: function (jq, text) {
            return jq.each(function () {
                var opts = $.data(this, "progressbar").options;

                if (opts.text != text) {
                    opts.text = text;

                    $(this).find("div.progressbar-text").html(text);
                }
            });
        },
        /**
         * 设置进度条的百分比
         * @param jq
         * @param percent
         */
        setPercent: function (jq, percent) {
            if (percent < 0) {
                percent = 0;
            }
            if (percent > 100) {
                percent = 100;
            }

            return jq.each(function () {
                var opts = $.data(this, "progressbar").options;
                var text = opts.text.replace(/{value}/, opts.value);

                opts.percent = percent;

                $(this).find("div.progressbar-value").width(percent + "%");
                $(this).find("div.progressbar-text").html(text);
            });
        },
        /**
         * 设置进度条的百分比
         * @param jq
         * @param percent
         */
        setColor: function (jq, color) {
            return jq.each(function () {
                var opts = $.data(this, "progressbar").options;

                if (opts.color != color) {
                    opts.color = color;

                    $(this).find("div.progressbar-value").css("background-color", color);
                    $(this).find("div.progressbar-text").css({
                        "background-color": color,
                        "color": 'white'
                    });
                }
            });
        }
    };

    $.fn.progressbar.parseOptions = function (_1f2) {
        return $.extend({}, $.parser.parseOptions(_1f2, ["width", "height", "text", {value: "number"}]));
    };

    $.fn.progressbar.defaults = {
        width: "auto",
        height: 22,
        value: 0,
        percent: 100,
        color: '#ffe48d',
        text: "{value}%",
        onChange: function (newValue, oldValue) {

        }
    };
})(jQuery);

相比于上篇文章，添加了setColor和setText两个方法，并且由于设置背景颜色之后，进度条的文字看起来不清晰，在设置背景颜色之后设置文字颜色为白色，这样文字就更突出，最后实现的效果如下图