Индикатор выполнения jquery-ui, изменение цвета в соответствии со значением

Question

Я пытался добиться индикатора выполнения, в котором <50 - это один цвет,> 50 и <75 - это другой цвет, а> 75 и <85 - это еще один цвет, используя jquery-ui ProgressBar. </p>

Я прочитал довольно много ответов, и я не могу обернуть голову вокруг этого.мой js-файл (я показываю два индикатора выполнения):

$(document).ready(function() {
  $(function() {
    let progressbar = $("#progressbar"), progressLabel = $("#progress-label");
    let progressbar2 = $("#progressbar2"), progressLabel2 = $("#progress-label2");

    progressbar.progressbar({
      value: 0,
      change: function() {
        progressLabel.text(progressbar.progressbar("value") + "% Complete!");
      }
    });

    progressbar2.progressbar({
      value: 0,
      change: function() {
        progressLabel2.text(progressbar2.progressbar("value") + "% Complete!");
      }
    });

    function progress() {
      let val = progressbar.progressbar("value") || 0;
      let val2 = progressbar2.progressbar("value") || 0;

      if (val < 50) {
        progressbar.progressbar("value", val + 1);
      }
      if (val2 < 85) {
        progressbar2.progressbar("value", val2 + 1);
      }
      setTimeout(progress, 20);

    }
    setTimeout(progress, 500);
    // setTimeout(progress2, 500);
  });
});

Это - скрипка моей работы до сих пор.

Любая помощь очень ценится!

Answer 1

То, что вам нужно изменить, это элемент класса ui-progressbar-value в строке прогресса.Вы можете просмотреть Theming здесь: http://api.jqueryui.com/progressbar/

Theming

Виджет индикатора прогресса использует CSS-фреймворк jQuery UI для стилизации его внешнего вида.Если требуется стиль, специфичный для индикатора выполнения, следующие имена классов CSS могут использоваться для переопределений или в качестве ключей для опции классов:

ui-progressbar: The outer container of the progressbar. This element will additionally have a class of ui-progressbar-indeterminate for indeterminate progressbars. For determinate progressbars, the ui-progressbar-complete class is added once the maximum value is reached.
    ui-progressbar-value: The element that represents the filled portion of the progressbar.
        ui-progressbar-overlay: Overlay used to display an animation for indeterminate progressbars.

Таким образом, чтобы исправить код, когда есть changeВы можете проверить значение и настроить background из .ui-progressbar-value для этого объекта.

Пример: https://jsfiddle.net/Twisty/r16bhjwz/26/

HTML

<div class="container">
  <div class="well">
    <div id="progressbar">
      <div id="progress-label" class="label"></div>
    </div>
    <div id="progressbar2">
      <div id="progress-label2" class="label"></div>
    </div>
  </div>
</div>

JavaScript

$(function() {
  let progressbar = $("#progressbar"),
    progressLabel = $("#progress-label");
  let progressbar2 = $("#progressbar2"),
    progressLabel2 = $("#progress-label2");

  function checkValue(obj) {
    var val = obj.progressbar("value") || 0;
    var bar = $(".ui-progressbar-value", obj);
    switch (true) {
      case (val <= 25):
        bar.css('background', 'LightGreen');
        break;
      case (val > 25 && val <= 50):
        bar.css('background', 'Yellow');
        break;
      case (val > 50 && val <= 75):
        bar.css('background', 'Orange');
        break;
      case (val > 75):
        bar.css('background', 'Red');
        break;
    }
  }

  function makeBar(obj) {
    obj.progressbar({
      value: 0,
      change: function(e, ui) {
        $(".label", this).text($(this).progressbar("value") + "% Complete!");
        checkValue($(this));
      }
    });
  }

  makeBar($("#progressbar"));
  makeBar($("#progressbar2"));

  function progress() {
    let val = progressbar.progressbar("value") || 0;
    let val2 = progressbar2.progressbar("value") || 0;
    if (val < 50) {
      progressbar.progressbar("value", val + 1);
    }
    if (val2 < 85) {
      progressbar2.progressbar("value", val2 + 1);
    }
    setTimeout(progress, 20);
  }
  setTimeout(progress, 500);
  // setTimeout(progress2, 500);
});

Надеюсь, это поможет.