3

これは、jQuery プログレス バーで他の人の助けになることを期待して共有したい情報ではなく、あまり質問ではありません。

最近、トレーニング レビューを完了する必要がある四半期の残り日数を表示するプログレス バーを作成するように依頼されました。バーは多色 (緑、黄、赤) である必要がありました。バーは四半期の 2 番目の月にのみ表示され、四半期の 3 番目の月の 16 日まで表示されます。

単純な要求が、開発において最も苦痛をもたらす場合があります。

ここに画像の説明を入力

これは、jQuery、javascript、html、および css を使用した最終結果のスクリーンショットです。

ページの作業コピーはjsFiddle Exampleにあります。

            (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