bootstrap - jQuery UI: ¿Cómo cambiar el color de una ProgressBar?

progress bar jquery ajax

Question

Configuré una barra de progreso jQueryUI simple:

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

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

Ahora, me gustaría colorear la barra en función de su valor (por ejemplo, <10 rojo, <50 amarillo,> 50 verde). ¿Cómo hago esto?

Nota: Hay preguntas similares , pero las respuestas no fueron lo suficientemente claras como para ayudarme a hacer las cosas. Con suerte, alguien puede señalar una manera más fácil o proporcionar instrucciones más detalladas. Gracias.

Answer 1

Debido a que el ejemplo de trabajo sobre las respuestas aceptadas parece no estar funcionando, lo dejo basado en su respuesta en caso de que alguien lo encuentre útil.

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

Answer 2

Jugueteé con eso y esto es lo que encontré. Usando jQuery UI v1.8rc3, puedo anular los colores del tema para la barra de progreso.

texto alternativo http://i42.tinypic.com/mt5v6p.jpg

Aquí se explica cómo: cuando agrega un widget de barra de progreso a un div, con algo como:

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

... la barra de progreso jQuery UI crea un div dentro de su div; este div interno representa la barra de valores. Para establecer el color de la barra, establezca el fondo de la div secundaria (interna).

También puede establecer el color del espacio vacío en la barra de progreso, el espacio a la derecha de la barra de valores. Para ello, establezca el fondo del div externo.

Para cualquiera de estos, puede usar colores planos o imágenes. Si usa imágenes, asegúrese de configurar repeat-x. El código para hacer eso, se ve así:

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, eso se encarga de configurar los colores. Ahora, si desea establecer dinámicamente el color de la barra a medida que cambia el valor, enganche el evento progressbarchange, como este:

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

Demostración de trabajo: http://jsbin.com/atiwe3/3

Nota:

Si desea anular los colores de todas las barras de progreso, las clases css que se usarán son ui-widget-content , para el "fondo" o div externo, y ui-widget-header para la barra real (correspondiente al div interno). Me gusta esto:

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

Si elimina el prefijo .ui-progressbar , anulará los colores de todos los widgets UI, incluidas las .ui-progressbar progreso.

Answer 3

Una cosa simple sería cuando está inicializando la barra de progreso con los valores en su js que hace:

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

Como quiere colores diferentes para diferentes barras de progreso, puede hacer:

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

Espero que esto responda tu pregunta. Intenté hacer lo que dijo el tipo en la primera respuesta, pero no pude hacerlo funcionar, así que lo intenté y comenzó a funcionar.

Answer 4

Usa el siguiente código:

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

Answer 5

jQuery Progressbar usa CSS e imágenes.

Su respuesta dice lo mismo:

hay una entrada css llamada .ui-widget-overlay que hace referencia a la imagen ui-bg_diagonals-thick_20_666666_40x40.png, que creo que es la imagen que realmente impulsa la barra de progreso. Tendrás que hackear el CSS para que puedas agregar una nueva clase que haga referencia a tu nueva imagen en la otra barra de progreso; Todavía no he resuelto cómo hacerlo.

Para cambiar el color, debería modificar la imagen png.

O como se escribió anteriormente, puede copiar la imagen, agregar una segunda clase y agregarlos usando jquery:

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