3

这与其说是一个问题，不如说是我希望分享的信息，希望它可以帮助其他人使用 jQuery 进度条。

我最近被要求创建一个进度条，显示一年中给定季度中需要完成培训审查的天数。进度条需要多色（绿色、黄色、红色）并且该条仅在该季度的第 2 个月出现，并一直持续到该季度的第 3 个月的第 16 天。

有时，简单的请求可能会给我们带来开发中的最大痛苦。

在此处输入图像描述

这是使用 jQuery、javascript、html 和 css 的最终结果的屏幕截图

您可以在jsFiddle 示例中找到该页面的工作副本

            (function ($) {
            $.fn.animateProgress = function (progress, callback) {
                return this.each(function () {
                    $(this).animate({
                        width: 100 - progress + '%',
                        left: progress + '%'
                    }, {
                        duration: 1000,
                        easing: 'swing',
                        step: function (progress) {
                            var labelEl = $('.ui-label', this),
                                valueEl = $('.value', labelEl);
                        },
                        complete: function (scope, i, elem) {
                            if (callback) {
                                callback.call(this, i, elem);
                            };
                        }
                    });
                });
            };
        })(jQuery);

我确实在示例中添加了一个 jQuery 日期选择器，以便您可以轻松更改日期以观察进度条的行为。

希望这可以帮助其他可能在进度条上苦苦挣扎的人

4

0 回答 0