jQuery用户界面：如何改变进度条的颜色？(jQuery UI: How to change th

我已经建立了一个简单的jQueryUI的进度：

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

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

现在，我想的颜色基于它的酒吧的值（例如<10的红色，<50黄，> 50个绿色）。 我该怎么做呢？

注：有类似的问题 ，但答案还不够明确，帮我把事情做好。 希望有人能指出一个更简单的方法，或提供更详细的说明。 谢谢。

Answer 1:

我拨弄与它周围，这里是我发现了什么。 使用jQuery UI v1.8rc3，我可以覆盖主题颜色进度条。

替代文字http://i42.tinypic.com/mt5v6p.jpg

具体方法如下：当您添加一个进度窗口小部件，DIV，喜欢的东西：

$("#mydiv").progressbar({value:0});

...的jQuery UI的进度创建你的专区内一个div; 该内的div代表值栏。 要设置栏的颜色，设置孩子（内）div的背景。

您还可以设置空闲空间的进度条的颜色，空间的价值栏的右侧。 通过设置外层div的背景下做到这一点。

对于任何的这些，你可以使用平面颜色或图像。 如果你使用的图像，然后一定要设置重复-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' });
}

OK，这需要设置颜色的照顾。 现在，如果你想动态设置栏中的值发生变化的颜色，你勾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

---

注意：

如果你想覆盖的颜色为所有progressbars 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组件，包括progressbars的颜色。

Answer 2:

使用下面的代码：

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

Answer 3:

jQuery的进度使用CSS和图像。

你的＃1回答说是相同的：

有一个名为的.ui小部件叠加的CSS条目引用图像UI-bg_diagonals-thick_20_666666_40x40.png，我认为这是实际推动进度条的图像。 你将不得不破解的CSS，使您可以添加一个新的类，它引用其他进度条新形象; 我还没有想出如何做到这一点呢。

为了改变颜色，你将不得不修改PNG图像。

或者，正如上面写的你可以复制的图像添加第二个类，并使用jquery添加它们：

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

Answer 4:

当你在你的JS你做值初始化进度条一件简单的事情是：

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

既然你想为不同progressbars不同的颜色，你可以这样做：

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

文章来源: jQuery UI: How to change the color of a ProgressBar?