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 绿色)为条形着色.我该怎么做?

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.

注意:有

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

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.

...jQuery UI 进度条在您的 div 中创建一个 div；这个内部 div 代表值栏.要设置栏的颜色，请设置背景子(内部)div.

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

您还可以设置进度条中空白区域的颜色，即值栏右侧的空间.通过设置外部 div 的背景来做到这一点.

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

对于其中任何一种，您都可以使用纯色或图像.如果你使用图片，那么一定要设置repeat-x.执行此操作的代码如下所示:

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

html:

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: 

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

html:

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，用于背景"或外部 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屋！