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

Question

我已经设置了一个简单的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的背景.

您还可以在进度条中设置空白区域的颜色,即值栏右侧的空间.通过设置外部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为"background"或外部div,以及ui-widget-header实际的bar(对应于内部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'})}
   });