jQuery UI:如何更改ProgressBar的颜色? [英] jQuery UI: How to change the color of a ProgressBar?

问题描述

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

I've set up a simple jQueryUI progressbar:

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

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

现在，我想根据条形的颜色(例如<10红色，<50黄色，> 50绿色)为条形着色.我该怎么做?

Now, I'd like to color the of the bar based on it's value (e.g. <10 red, <50 yellow, >50 green). How do I do this?

注意:这里有类似的问题，但答案还不够清晰，无法帮助我完成工作.希望有人可以指出一种更简单的方法或提供更详细的说明.谢谢.

Note: There are similar questions, but the answers were not clear enough to help me get things done. Hopefully, someone can point out an easier way or provide more detailed instructions. Thanks.

推荐答案

我在弄弄它，这就是我发现的东西.使用jQuery UI v1.8rc3，我可以覆盖进度条的主题颜色.

I fiddled around with it and here's what I found. Using jQuery UI v1.8rc3, I can override the theme colors for the progress bar.

方法如下: 当您将div进度条小部件添加到div时，诸如:

Here's how: When you add a progressbar widget to a div, with something like:

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

... jQuery UI进度栏在div中创建一个div；此内部div代表值栏.要设置条形的颜色，请设置 儿童(内)分部

...the jQuery UI progressbar creates a div within your div; this inner div represents the value bar. To set the color of the bar, set the background of the child (inner) div.

您还可以在进度栏(值栏右侧的空间)中设置空白区域的颜色.通过设置外部div的背景来执行此操作.

You can also set the color of the empty space in the progress bar, the space to the right of the value bar. Do this by setting the background of the outer div.

对于这两种方法，都可以使用纯色或图像.如果使用图像，请确保设置repeat-x.这样做的代码如下:

For either of these, you can use flat colors, or images. If you use images, then be sure to set the repeat-x. The code to do that, looks like this:

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事件，如下所示:

ok, that takes care of setting the colors. Now, if you want to dynamically set the color of the bar as the value changes, you hook the progressbarchange event, like this:

    $("#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(对于"background"或外部div)，以及ui-widget-header对于实际的条(对应于内部div).像这样:

If you want to override the colors for all progressbars the css classes to use are ui-widget-content, for the "background" or outer div, and ui-widget-header for the actual bar (corresponding to the inner div). Like this:

  .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小部件的颜色，包括进度条.

If you eliminate the .ui-progressbar prefix, it will override the colors of all UI widgets, including progressbars.

这篇关于jQuery UI:如何更改ProgressBar的颜色?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！