时间戳

首页 > 解决方案 > jquery-ui进度条，根据值改变颜色

jquery - jquery-ui进度条，根据值改变颜色

问题描述

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

我已经阅读了很多答案，但我无法绕开它。我的 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);
  });
});

这是我到目前为止的工作的小提琴。

非常感谢任何帮助！

标签： jqueryjquery-ui

解决方案

您需要更改的是ui-progressbar-value进度条中的类元素。您可以在此处查看主题：http: //api.jqueryui.com/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.

因此，要修复您的代码，当有 a 时，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);
});

希望有帮助。

推荐阅读