JQuery UI のProgressBarのデフォルトの色を状況によって変えられるよう実装した。

時間がかかる処理とかの進行状況を表示するのに使われるprogressbarを

状況によって色が変化できるようにならないのかと考え

数字入力ボックスと連動してバーの変化とバーの色を変化させるプログラムを作成しました。

javascript側

$(function(){

    $('#progress').progressbar({
        value:0,
        max:100
    });

    $('#aaa').change(function(){
        var param = $("#aaa").val();
        var color = $('.ui-progressbar-value');

        if(param <=30){
            color.css('background','red');
        }else if(param > 30 && param <= 60){
            color.css('background','yellow');
        }else if(param > 60){
            color.css('background','green');
        }
        $('#progress').progressbar({
            value:parseInt(param)
        });
    });

});

HTML側

<input type="number" min="0" max="100" name="num" id="aaa">
<div id="progress"></div>

javascript側の処理ではjQuery UI を使用して実装しております。

progressbarメソッドの初期設定を行い、数字入力ボックスの値が増減したときに

changeイベントを発火させ、値を取得します。取得した値に応じてバーの色が変化

するように背景色を変える分岐を入れました。そして取得した値を

progressbarメソッドにセットして完成です。

取得した値をparseIntで変換しないと値がセットされないことにハマりました・・・

作成したのはいいけれど使用する機会があまり思い浮かびませんでした・・・

おしまい