jqueryui 主题滚轮答案

【问题标题】：jqueryui themerollerjqueryui 主题滚轮
【发布时间】：2011-02-05 00:34:14
【问题描述】：

我正在学习 jQuery UI 中的框架图标。

<span class="ui-icon ui-icon-circle-minus"></span>

在圆圈内生成一个减号图标。
使用 ThemeRoller Firefox Bookmarklet，我能够将图标的颜色更改为红色（使其看起来像一个删除按钮）。

问：如何让一个 jQueryUI 图标为红色而另一个为另一种颜色？

<span class="ui-icon ui-icon-circle-plus"></span>

我想把这个变成绿色。

【问题讨论】：

标签： jquery-ui

【解决方案1】：

你不能这样做，至少不能在 ThemeRoller 的上下文中。 Themeroller 为此使用了一张 sprite 图片……一张包含所有图标的大图片。

您可以创建另一个主题，将 spritemap 图像添加到您的 images 文件夹中，然后进入您的 jQuery UI CSS 并更改 .ui-icon-circle-plus background-image 属性。

应该是这样的：

.ui-icon-circle-plus { background-position: 0 -192px; }

它需要看起来像这样：

.ui-icon-circle-plus {
   background-image: url(RedIcons.png);
   background-position: 0 -192px; 
}

您可以查看它当前使用的图像的.ui-icon 样式。

【讨论】：

我认为 ThemeRoller 会为每个状态生成不同的精灵。无论如何，我的主题中有 5 个单独的图标精灵。根据您设置状态的方式，精灵的颜色都不同。
@tvan - 是的，但前提是他的状态之一已经是红色的......在这种情况下，如果他总是想要负红色，仍然是相同的解决方案，更改该元素的背景图像（在那种情况下，他已经有了图像......仍然比编辑小部件容易得多）。

【解决方案2】：

使用ui-state-... 类来更改带有图标的元素的状态。您需要设计您的主题，使处于不同状态（突出显示、悬停、活动、错误、默认）的项目具有不同的颜色。

<span class="ui-icon ui-icon-circle-plus ui-state-highlight"></span>

我建议不要以这种方式使用状态（就是为了改变颜色）。我会在语义上使用状态并让图标根据需要呈现以与状态保持一致。如果我特别需要红色/绿色图标，我会专门将这些图标生成为图像并直接使用它们，而不是尝试设计主题来为这些图标提供不同的颜色选择。

就其价值而言，我认为FamFamFam Silk 图标与 jQuery UI 集成得非常好。

【讨论】：

感谢您提供有关 FamFamFam 的提示。
你有更多关于 Silk + jQuery UI 集成的详细信息吗？
@Alison - 集成可能是错误的词。我实际上并没有在 jQuery UI 组件中使用 Silk 图标，而是在 jQuery UI 组件旁边使用这些图标。从设计的角度来看，它们在一起看起来很好。
感谢澄清 :) 那么 jQuery UI 是否仍然显示自己的图标？