关于jQuery UI:如何更改一个进度条的颜色/大小

 2021-04-27 

How to change the color/size of one progress bar

我对jQuery-UI还是很陌生,但是到目前为止我还是很喜欢。

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

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

非常感谢!
盖伊


旅行技术专家:

如果您在jQueryUI下载的css文件夹中查找,则会找到一个主题文件夹;我的被??称为ui-lightness,您的可能被称为ui-blitzer。进入该文件夹,然后进入images文件夹。在这里,您会找到一些以字母ui-bg_diagonalsui-bg_gloss开头的图像文件。这些是驱动进度条的图像。您应该能够从其他主题添加一些您想要的颜色的图像,这将驱动您的其他状态栏。

此外,还有一个名为.ui-widget-overlay的css条目,它引用图像ui-bg_diagonals-thick_20_666666_40x40.png,我认为它实际上是驱动进度条的图像。您将不得不修改css,以便可以在另一个进度栏中添加引用新图像的新类。我还没有弄清楚该怎么做。


这是设置条形的方式,因此请修改其中的类。

1
 

(位于徽章底部)

修改ui-progressbarui-progressbar-value