jquery ui:如何更改进度条的颜色?

我摆弄它,这是我发现的。使用jquery ui v1.8rc3,我可以覆盖进度条的主题颜色。

alt text http://i42.tinypic.com/mt5v6p.jpg

以下是如何: 当您将ProgressBar小部件添加到一个DIV时,使用如下内容:

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

…jquery ui progressbar在您的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 ,对于“后台”或外部分区,以及 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小部件的颜色,包括进度条。

使用以下代码:

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

jQueryProgressBar使用CSS和图像。

您的stackoverflow答案是一样的:

有一个叫做.ui小部件覆盖的css条目,它引用了图像ui-bg_对角线thick_20_666666_40x40.png,我认为这是实际驱动进度条的图像。你必须破解CSS,这样你就可以添加一个新的类来引用你在另一个进度条中的新图片;我还没有弄清楚怎么做。

要更改颜色,必须修改PNG图像。

或者如上所述,您可以复制图像,添加第二个类,然后使用jquery添加它们:

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

一件简单的事情是,当您使用JS中的值初始化进度条时,您会这样做:

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

由于您希望不同的进度条使用不同的颜色,因此可以执行以下操作:

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

我希望这能回答你的问题。我试着按他在第一个答案中说的做,但没能让它工作,所以试了这个,它就开始工作了。

因为关于被接受答案的工作示例似乎不起作用,所以我将这个示例留在他的答案中,以防有人发现它有用。

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