给easyui的progressbar组件添加一个设置进度条进度的方法

事情经过大概是这样：easyui有一个progressbar进度条组件，样式挺好看，但是没有完全满足我的需求，最近有时间了，决定修改一下easyui的源码。

easyui progressbar存在的问题：
①只能显示0~100的数字；
②不能动态显示百分比，除非设置value为"{value%}"，也就是progressbar默认的文本格式，但是有些情况下是不需要显示百分比的，只需要显示给定的值，而进度条的进度通过计算得到

修改之后的progressbar部分的代码为

jquery.easyui.min.js

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

    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
         * @returns {*}
         */
        getValue: function (jq) {
            return $.data(jq[0], "progressbar").options.value;
        },
        /**
         * 设置组件的值
         * @param jq
         * @param value
         * @returns {*}
         */
        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 _1f1 = 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);

                if (_1f1 != value) {
                    opts.onChange.call(this, value, _1f1);
                }
            });
        },
        /**
         * 设置进度条的百分比
         * @param jq
         * @param percent
         * @returns {*}
         */
        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 _percent = opts.percent;
                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);
            });
        }
    };

    $.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,
        text: "{value}%",
        onChange: function (newValue, oldValue) {

        }
    };
})(jQuery);

在以上代码中新增了一个方法setPercent，可以设置进度条的进度，用法为

/**
 * selector表示选择器，如id选择器、类选择器等等
 * percent表示百分比，范围0~100
*/
$(selector).progressbar("setPercent", percent);

当然，也可以像其他属性一样，渲染组件的时候就指定percent属性的值

$('#qixue').progressbar({
    width: 200,
    height: 22,
    percent: 50,
    value: 100,
    text: "{value}"
});

最后能实现的效果如下图

文章就分享到这了，感谢阅读~