Question

我有一个网格，显示系统驱动器空间。我在进度条格式的gridview列中显示C驱动器的空间。我从我的db绑定gridview。假设驱动器空间值大于90，我需要将进度条颜色显示为红色，否则为绿色。

这是gridview专栏的源代码：

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

这是输出，我得到了：

如何在运行时动态更改进度条的颜色？

Answer 1

创建背景色为红色的CSS类“警告”。将栏的默认颜色设置为绿色。如果value大于90，则向进度条添加“warning”类，否则删除“warning”类。

可以在此处找到用于添加/删除类的JQuery代码示例： https://api.jquery.com/addclass/

你最终可能会这样：

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

或类似的东西。

Answer 2

试试这个;

$(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");
}
});
});

Answer 3

这个答案很好。谢谢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>

使用jQuery动态更改进度条的颜色

3 个答案: