从 jQuery UI 获取突出显示的彩色图标作为项目符号点？

Question

在我的 jQuery themebuilder 构建的主题中，我有 5 个不同的 ui-icons_* 文件。 其中两个是与高光颜色相对应的橙色阴影。 我想使用橙色图标作为项目符号。

我的第一次尝试将图标放在它自己的行上。

<div class="heading">
    <span class="ui-icon ui-icon-triangle-1-e" ></span>
    Meeting
</div>

我的第二次尝试给出了图标，但未正确对齐。

<div class="heading">
    <span class="ui-icon ui-icon-triangle-1-e" style="display:inline-block"></span>
    Meeting
</div>

添加以下样式使文本与图标对齐：

.heading { vertical-align: top; }

http://jsfiddle.net/rypyP/1/

我想要的颜色在 ui-state-active 集中，所以如果我将该状态添加到包含单元中，它将获得正确的颜色，但对于整个 enchilada （边框、背景颜色、文本颜色），我只想项目符号点橙色。

<div class="heading ui-state-active">
    <span class="ui-icon ui-icon-triangle-1-e" style="display:inline-block"></span>
    Meeting
</div>

http://jsfiddle.net/MEXQV/1/

我可以 jQuery 主题中特定 ui 状态的图标，而不重写 css？

如果不可能，您建议采用什么方式？为什么？

解决方案

样式表：

.heading
{
    vertical-align: top;
}

Html：

<div class="heading">
    <span class="ui-state-active" style="border: 0px">
        <span class="ui-icon ui-icon-triangle-1-e" style="display:inline-block; border: 0px">
        </span>
    </span>
    Meeting
</div>

http://jsfiddle.net/rypyP/4/

Answer 1

如果你只想获取特定 ui-state 的图标，你可以这样做：

<div class="heading">
<span class="ui-state-active ui-icon ui-icon-triangle-1-e " style="display:inline-block"></span>
Meeting</div>

它的作用是在 jQuery 的默认主题图标集上查找指定的图标（默认情况下它有四个图标集 - active、default、突出显示和错误）。如果你想删除边框等，你必须在你自己的 CSS 中重写 ui-state 类，例如：添加 .ui-state-active { border: 0px;谢谢

。