jQuery UI: Wie kann man die Farbe einer ProgressBar ändern?

Question

Ich habe eine einfache jQueryUI Progressbar eingerichtet:

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

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

Nun möchte ich den Balken je nach seinem Wert einfärben (z. B. <10 rot, <50 gelb, >50 grün). Wie kann ich das tun?

Anmerkung: Es gibt ähnliche Fragen aber die Antworten waren nicht klar genug, um mir zu helfen, die Dinge zu erledigen. Hoffentlich kann mir jemand einen einfacheren Weg aufzeigen oder genauere Anweisungen geben. Danke!

Answer 1

Ich habe damit herumgespielt und folgendes herausgefunden. Mit jQuery UI v1.8rc3, kann ich das Thema Farben für den Fortschrittsbalken überschreiben.

So geht's: Wenn Sie ein Fortschrittsbalken-Widget zu einem Div hinzufügen, mit etwas wie:

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

...die jQuery UI-Fortschrittsleiste erstellt ein div innerhalb Ihres div; dieses innere div stellt den Wertebalken dar. Um die Farbe des Balkens festzulegen, setzen Sie den Hintergrund von des untergeordneten (inneren) Divs.

Sie können auch die Farbe des leeren Raums im Fortschrittsbalken, des Raums rechts neben dem Wertebalken, einstellen. Dazu legen Sie den Hintergrund des äußeren Divs fest.

In beiden Fällen können Sie flache Farben oder Bilder verwenden. Wenn Sie Bilder verwenden, dann stellen Sie sicher, dass Sie die Wiederholung-x einstellen. Der Code dafür sieht wie folgt aus:

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, damit ist die Einstellung der Farben erledigt. Nun, Wenn Sie die Farbe des Balkens dynamisch einstellen möchten, während sich der Wert ändert, haken Sie das progressbarchange-Ereignis ein, etwa so:

    $("#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' });
        }
    });

Arbeitsvorführung: http://jsbin.com/atiwe3/3

---

Nota:

Wenn Sie die Farben für alle Fortschrittsbalken die zu verwendenden css-Klassen sind ui-widget-content für den "Hintergrund" oder das äußere Div und ui-widget-header für den eigentlichen Balken (entsprechend dem inneren div). Etwa so:

  .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%;
  }

Wenn Sie die .ui-progressbar Präfix werden die Farben aller UI-Widgets, einschließlich der Fortschrittsbalken, außer Kraft gesetzt.

Answer 2

Verwenden Sie den folgenden Code:

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

Answer 3

JQuery Progressbar verwendet CSS und Bilder.

Ihre Stackoverflow-Antwort besagt dasselbe:

es gibt einen css-Eintrag namens .ui-widget-overlay, der auf das Bild ui-bg_diagonals-thick_20_666666_40x40.png verweist, das meiner Meinung nach das Bild ist, das den Fortschrittsbalken antreibt. Sie müssen die CSS hacken, so dass Sie eine neue Klasse hinzufügen können, die Ihr neues Bild in der anderen Fortschrittsanzeige referenziert; Ich habe noch nicht herausgefunden, wie man das macht.

Um die Farbe zu ändern, müssten Sie das png-Bild ändern.

Oder wie oben geschrieben, könnten Sie das Bild kopieren, eine zweite Klasse hinzufügen und sie mit Jquery hinzufügen:

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

Answer 4

Eine einfache Sache wäre, wenn Sie den Fortschrittsbalken mit Werten in Ihrem js Sie tun initialisieren:

$(progressBarId).children().css('backgroud',) ;

Da Sie verschiedene Farben für verschiedene Fortschrittsbalken wünschen, können Sie dies tun:

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

Ich hoffe, dies beantwortet Ihre Frage. Ich habe versucht, das zu tun, was der Typ in der ersten Antwort gesagt hat, konnte es aber nicht zum Laufen bringen, also habe ich das hier versucht und es hat funktioniert.

Answer 5

Da das Arbeitsbeispiel in den akzeptierten Antworten nicht zu funktionieren scheint, lasse ich dieses Beispiel in seiner Antwort stehen, falls es jemand nützlich findet.

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);
}