jQuery UI：如何更改 ProgressBar 的颜色？

Question

我已经设置了一个简单的 jQueryUI 进度条：

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

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

现在，我想根据条形的值对条形进行着色（例如，50 绿色）。我该怎么做？

注意：有similar questions，但答案不够清楚，无法帮助我完成工作。希望有人可以指出更简单的方法或提供更详细的说明。谢谢。

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

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

好的，它负责设置颜色。现在， 如果你想随着值的变化动态设置条的颜色，你可以钩住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 前缀，它将覆盖所有 UI 小部件的颜色，包括进度条。

Answer 2

使用以下代码：

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

Answer 3

jQuery Progressbar 使用 CSS 和图像。

您的 Stackoverflow 答案也是如此：

有一个名为 .ui-widget-overlay 的 css 条目引用了图像 ui-bg_diagonals-thick_20_666666_40x40.png，我认为它是实际驱动进度条的图像。您将不得不破解 css，以便您可以在另一个进度条中添加一个引用您的新图像的新类；我还没想好怎么做。

要更改颜色，您必须修改 png 图像。

或者如上所述，您可以复制图像添加第二个类并使用 jquery 添加它们：

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

Answer 4

一个简单的事情是当你用你的 js 中的值初始化进度条时：

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

由于您希望不同的进度条具有不同的颜色，您可以这样做：

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

我希望这能回答您的问题。我尝试按照该人在第一个答案中所说的进行操作，但无法使其正常工作，因此尝试了此操作并开始工作。

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