JQuery UI: Как изменить цвет ProgressBar?

Я установил простой индикатор jQueryUI:

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

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

Теперь я хочу покрасить планку на основе ее значения (например, < 10 red, < 50 yellow, > 50 green). Как это сделать?

Примечание: есть подобные вопросы, но ответы были недостаточно ясны, чтобы помочь мне в этом. Надеюсь, кто-то может указать более простой способ или предоставить более подробные инструкции. Спасибо.

Ответ 1

Я возился с этим и вот что я нашел. Используя jQuery UI v1.8rc3, я могу переопределить цвета темы для индикатора выполнения.

Вот как: Когда вы добавляете виджет прогрессбара в 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>

ЯШ:

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

хорошо, это заботится о настройке цветов. Теперь, если вы хотите динамически установить цвет панели при изменении значения, вы подключаете событие 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/3

Замечания:

Если вы хотите переопределить цвета для всех индикаторов выполнения, используйте классы 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, он переопределит цвета всех виджетов пользовательского интерфейса, включая индикаторы выполнения.

Ответ 2

Используйте следующий код:

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

Ответ 3

jQuery Progressbar использует CSS и изображения.

В ответе на ваш стоп-запрос указано то же самое:

есть запись css с именем .ui-widget-overlay, которая ссылается на изображение ui-bg_diagonals-thick_20_666666_40x40.png, которое, я думаю, является образом, которое фактически управляет индикатором выполнения. Вам придется взломать css, чтобы вы могли добавить новый класс, который ссылается на ваше новое изображение в другой строке выполнения; Я еще не понял, как это сделать.

Чтобы изменить цвет, вам нужно будет изменить png-изображение.

Или, как написано выше, вы можете скопировать изображение, добавив второй класс и добавить их с помощью jquery:

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

Ответ 4

Одна простая вещь заключается в том, что вы инициализируете индикатор выполнения со значениями в ваших js, которые вы делаете:

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

Так как вы хотите разные цвета для разных панелей progressbars, вы можете сделать:

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

Надеюсь, это ответит на ваш вопрос. Я попытался сделать то, что сказал парень в первом ответе, но не смог заставить его работать, поэтому попробовал это, и он начал работать.

Ответ 5

Поскольку рабочий пример по принятым ответам, похоже, не работает, я оставляю это в своем ответе на случай, если кто-либо найдет его полезным.

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