Question

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

我正在使用'blitzer'主题（因为我需要红色进度条）并且我有4个进度在一页上并排排列。现在我的PM希望其中一个是绿色的，比其他的更大。我环顾了提供的主题CSS但找不到合适的标签来修补。任何人都可以发布不同尺寸/颜色的2个进度条的短代码吗？

奖金问题：我被要求在PB本身打印PB的百分比 - 没什么大不了的 - 我只是在div中添加了一个标签。问题是标签中的文本是白色的，因此如果PB为空或半空，则文本将变为不可见。有没有办法控制PB的背景颜色，还是在主题内部给定？

非常感谢！
盖

Answer 1

这是设置栏的方式，因此修改其中的类。

<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>

(Its at the bottom of the badge)

修改ui-progressbar和ui-progressbar-value。

Answer 2

旅行技术人员：

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

此外，有一个名为.ui-widget-overlay的css条目引用了图像ui-bg_diagonals-thick_20_666666_40x40.png，我认为这是实际驱动进度条的图像。您将不得不破解css，以便您可以在其他进度条中添加引用新图像的新类;我还没想出怎么做。

如何更改一个进度条的颜色/大小

2 个答案: