Question

我一直在尝试使用jquery-ui进度条实现进度条，其中<50是一种颜色，> 50和<75是另一种颜色，> 75和<85是另一种颜色。

我已经阅读了很多答案，但我无法将其包裹住。我的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);
  });
});

这是我到目前为止的工作fiddle。

非常感谢任何帮助！

Answer 1

您需要更改的是进度栏中的ui-progressbar-value类元素。您可以在此处查看主题：http://api.jqueryui.com/progressbar/

主题

progressbar小部件使用jQuery UI CSS框架设置其外观样式。如果需要进度条特定的样式，则可以将以下CSS类名称用于替代或用作classes选项的键：

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的{{1}}。

示例：https://jsfiddle.net/Twisty/r16bhjwz/26/

HTML

.ui-progressbar-value

JavaScript

<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>

希望有帮助。

jquery-ui进度栏，根据值更改颜色

1 个答案: