Change the color of progress bar dynamically using jQuery

I have a grid, which shows the system drive space. I am showing the space of the C Drive in a gridview column in progress bar format. I bind the gridview from my the db. Suppose if the drive space value is greater than 90, I need to display the progress bar color as red else green.

This is the gridview column's source code:

<Columns>
     <asp:TemplateField>
          <ItemTemplate>
                 <div class='progress'>
                     <div class="progress-label"><%# Eval("C") %></div>
                 </div>
          </ItemTemplate>
      </asp:TemplateField>
</Columns>

.ui-progressbar {
    position: relative;
}

.progress-label {
    position: absolute;
    left: 50%;
    top: 4px;
    font-weight: bold;
    text-shadow: 1px 1px 0 #fff;
}

body {
    font-family: Arial;
    font-size: 10pt;
    }

$(function () {
    $(".progress").each(function () {
        $(this).progressbar({
            value: parseInt($(this).find('.progress-label').text())
        });
    });
});

This is the output, I am getting:

How to change the color of the progress bar dynamically at runtime?

---

Create CSS class "warning" with background color red. Set default color for the bar to green. If value is greater than 90, add class "warning" to progress bar, otherwise remove class "warning".

JQuery code examples for adding/removing class can be found here: https://api.jquery.com/addclass/

You could end up with this:

if(value>90) {
    $( this ).addClass( "warning" );
} else {
    $( this ).removeClass( "warning" );
}

Or something similar.

---

尝试这个;

$(function () {
$(".progress").each(function () {
value= parseInt($(this).find('.progress-label').text())
$(this).progressbar({
value: parseInt($(this).find('.progress-label').text())
});

if(value>90) {
$( this ).css( "background","orange");
} else {
$( this ).css( "background","blue");
}
});
});

---

This answer works fine. Thanks Arun P Johny.

 jQuery:

 $(function () {
        $(".progress").each(function () {
            var $this = $(this),
                value = parseInt($this.find('.progress-label').text());
            $this.progressbar({
                value: value
            });
            if (value < 90) {
                $this.addClass('under')
            } else {
                $this.addClass('over')
            }
        });
    });

 css:

 .over .ui-progressbar-value {
     background-color: red;
     background-image: none;
  }

  .under .ui-progressbar-value {
     background-color: blue;
     background-image: none;
  }

GridView Column:

<Columns>
     <asp:TemplateField>
         <ItemTemplate>
            <div class='progress'>
                 <div class="progress-label">
                      <%# Eval("C") %>
                 </div>
            </div>
        </ItemTemplate>
     </asp:TemplateField>
 </Columns>

链接地址: http://www.djcxy.com/p/31030.html

上一篇: 如何根据数据显示不同颜色的整个表格tr

下一篇: 使用jQuery动态改变进度条的颜色