如何更改一个进度条的颜色/大小 [英] How to change the color/size of one progress bar

问题描述

我对jQuery-UI还是很陌生，但是我喜欢到目前为止所看到的内容.

我正在使用'blitzer'主题(因为我需要红色进度条)，并且并排有4个进度条-在一页上.现在，我的PM希望其中之一是绿色的，并且要比其余的更大.我环顾了所提供的主题CSS，但找不到合适的标签进行修改.任何人都可以并排张贴简短的代码，其中包含2个不同大小/颜色的进度条吗?

I'm pretty new to jQuery-UI, but I love what I see so far.

I am using the 'blitzer' theme (as I needed red progress bars) and I have 4 progress bars side-by-side on one page. Now my PM wants one of them to be green, and bigger than the rest. I looked around the provided theme CSS but couldn't find the right tag to tinker with. Can anyone post a short code of 2 progress bars with different sizes/colors side by side?

奖金问题:我被要求在PB本身中打印PB的百分比-没什么大不了-我只是在div内添加了一个标签.问题在于标签中的文本为白色，因此，如果PB为空或半空，则该文本将变得不可见.有什么方法可以控制PB的背景色，还是在主题中指定背景色?

Bonus question: I was asked to print the PB's percentage in the PB itself - no biggie - I just added a label inside the div. The problem is the text in the label is colored white, so if the PB is empty or half-empty, the text becomes invisible. Is there any way to control the background color of the PB, or is it a given inside a theme?

非常感谢！
盖伊

Thanks a lot!
Guy

推荐答案

这是设置小节的方式，因此请修改其中的类.

This is how the bars are set up, so modify the classes inside them.

<div class="ui-progressbar ui-widget ui-widget-content ui-corner-all">
   <div style="width: 37%;" class="ui-progressbar-value ui-widget-header ui-corner-left"></div>
</div>

(位于徽章底部)

修改ui-progressbar和ui-progressbar-value.

这篇关于如何更改一个进度条的颜色/大小的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！