web-dev-qa-db-ja.com

jQuery UI：ProgressBarの色を変更する方法は？

シンプルなjQueryUIプログレスバーを設定しました：

<script type="text/javascript">
    $(function() {
        $("#progressbar").progressbar({
                value: 35
        });
    });
</script>

<div id="progressbar">  </div>

次に、その値に基づいてバーの色を設定します（例：<10赤、<50黄色、> 50緑）。どうすればいいですか？

注： 類似の質問 がありますが、答えは物事を成し遂げるのに役立つほど明確ではありませんでした。誰かがもっと簡単な方法を指摘したり、より詳細な指示を提供したりできることを願っています。ありがとう。

jqueryjquery-uiprogress-bar
35
Thorsten

私はそれをいじってみましたが、ここに私が見つけたものがあります。 jQuery UI v1.8rc3を使用して、進行状況バーのテーマの色をオーバーライドできます。

alt text

方法は次のとおりです。次のようなプログレスバーウィジェットをdivに追加する場合：

$("#mydiv").progressbar({value:0});

... jQuery UIプログレスバーは、div内にdivを作成します。この内側のdivは値バーを表します。バーの色を設定するには、子（内部）divの背景を設定します。

プログレスバーの空のスペース、値バーの右側のスペースの色を設定することもできます。これを行うには、外側のdivの背景を設定します。

どちらの場合も、単色または画像を使用できます。画像を使用する場合は、必ずrepeat-xを設定してください。そのためのコードは次のようになります。

html：

<div id='mainObj' class="inputDiv">
  <div id='pbar0' style="height: 20px;"></div>
  <div id='pbar1' style="height: 20px;"></div>
  <div id='pbar2' style="height: 20px;"></div>
  <div id='pbar3' style="height: 20px;"></div>
</div>

js：

function init(){
    // four progress bars
    $("#pbar0").progressbar({ "value": 63 });
    $("#pbar1").progressbar({ "value": 47 });
    $("#pbar2").progressbar({ "value": 33 });
    $("#pbar3").progressbar({ "value": 21 });

    // the zero'th progressbar gets the default theme

    // set colors for progressbar #1
    $("#pbar1").css({ 'background': 'url(images/white-40x100.png) #ffffff repeat-x 50% 50%;' });
    $("#pbar1 > div").css({ 'background': 'url(images/Lime-1x100.png) #cccccc repeat-x 50% 50%;' });

    // set colors for progressbar #2
    $("#pbar2").css({ 'background': 'url(images/lt-blue-40x100.png) #ffffff repeat-x 50% 50%' });
    $("#pbar2 > div").css({ 'background': 'url(images/dustyblue-1x100.png) #cccccc repeat-x 50% 50%' });

    // set colors for progressbar #3
    $("#pbar3").css({ 'background': 'LightYellow' });
    $("#pbar3 > div").css({ 'background': 'Orange' });
}

oK、色の設定は面倒です。ここで、値の変化に応じてバーの色を動的に設定する場合、次のようにprogressbarchangeイベントをフックします。

    $("#pbar0").bind('progressbarchange', function(event, ui) {
        var selector = "#" + this.id + " > div";
        var value = this.getAttribute( "aria-valuenow" );
        if (value < 10){
            $(selector).css({ 'background': 'Red' });
        } else if (value < 30){
            $(selector).css({ 'background': 'Orange' });
        } else if (value < 50){
            $(selector).css({ 'background': 'Yellow' });
        } else{
            $(selector).css({ 'background': 'LightGreen' });
        }
    });

動作デモ： http://jsbin.com/atiwe3/

注意：

すべてのprogressbarsの色をオーバーライドする場合、使用するcssクラスはui-widget-contentで、「背景」または外部divを表します。 ui-widget-headerは実際のバー（内部divに対応）。このような：

  .ui-progressbar.ui-widget-content {
     background: url(images/white-40x100.png) #ffffff repeat-x 50% 50%;
  }

  .ui-progressbar.ui-widget-header {
     color: Blue;
     background: url(images/Lime-1x100.png) #cccccc repeat-x 50% 50%;
  }

.ui-progressbarプレフィックスを削除すると、プログレスバーを含むすべてのUIウィジェットの色が上書きされます。

80
Cheeso

次のコードを使用します。

$( "#nahilaga" ).progressbar({
     value: 20,
     create: function(event, ui) {$(this).find('.ui-widget-header').css({'background-color':'red'})}
   });
4
Sirisha Naidu G

jQuery ProgressbarはCSSと画像を使用します。

Stackoverflowの答えは同じです：

画像ui-bg_diagonals-thick_20_666666_40x40.pngを参照する.ui-widget-overlayというcssエントリがあります。これは、実際に進行状況バーを駆動する画像だと思います。 cssをハッキングして、他のプログレスバーで新しい画像を参照する新しいクラスを追加できるようにする必要があります。私はまだそれをする方法を理解していません。

色を変更するには、PNG画像を変更する必要があります。

または、上記のように、イメージをコピーして2番目のクラスを追加し、jqueryを使用して追加できます。

$(progressBar).addClass('secondImage');
2
jantimon

受け入れられた回答の実例は機能していないように見えるので、だれかが有用だと思う場合に備えて、彼の回答に基づいてこれを残します。

https://jsfiddle.net/benjamintorr/a1h9dtkf/

$(function() {
  $( ".progressbar" ).each(function(i, obj) {
    $( this ).progressbar({
     value: false
    });
    $( this ).bind('progressbarchange', function(event, ui) {
     updateColors( this );
    });
   });
  $( "button" ).on("click", function(event) {
    $( ".progressbar" ).each(function(i, obj) {
      $( this ).progressbar("option", {
        value: Math.floor(Math.random() * 100)
      });
    });
  });
});

function updateColors( progressBar ) {
  var value = $( progressBar ).progressbar("value");
  if ( value > 50 ) {
    progressColor = "green";
  } else if (value > 10) {
    progressColor = "#FF9900";
  } else {
    progressColor = "red";
  }
  $( progressBar ).find(".ui-progressbar-value").css("background", progressColor);
}
0
Benjamin Torres

一つの簡単なことは、あなたが行うjsの値でプログレスバーを初期化するときです：

 $（progressBarId）.children（）。css（ 'backgroud'、）;

異なるプログレスバーに異なる色が必要なため、次のことができます。

if($(progressBarId).value() <10 )
//set a color
if (..)
//set another color

これがあなたの質問に答えることを願っています。私は最初の答えで男が言ったことをやってみましたが、それを動作させることができなかったので、これを試してみて、動作し始めました。

0
user590849