1

我以以下方式在 div 中放置了一个html 按钮：

<div class="ui-state-highlight">
    <button type="button" class="ui-button ui-state-default ui-corner-all ui-button-text-icon-primary">
        <!-- first span -->
        <span class="ui-button-icon-primary ui-icon ui-icon-disk"></span>
        <!-- second span -->
        <span class="ui-button-text">Save</span>
    </button>
    <!-- third span -->
    <span class="ui-icon ui-icon-info"></span>
    <strong>All</strong> form fields are required.
</div>

由于div已分配类：按钮的ui-state-highlight图标颜色已更改为blue。

有没有办法可以将图标颜色恢复为：默认（黑色）颜色？

此外，我需要第三个跨度中的图标具有ui-state-highlight.

我尝试将 应用ui-state-default到第一个跨度（包含图标），但这并没有达到预期的效果。

4

3 回答 3

1

重写ui-state-highlight应用于容器的类（例如divs 和 spans）解决了这个问题。

于 2013-03-04T09:00:24.960 回答
0

您可以添加新样式，默认（黑色）图标颜色的图像路径（http://code.jquery.com/ui/1.9.2/themes/base/images/ui-icons_2e83ff_256x240.png）

编辑：

或者将外部 div 类更改为 ui-state-default：

<div class="ui-state-default">
    <button type="button" class="ui-button ui-state-default ui-corner-all ui-button-text-icon-primary">
        <span class="ui-button-icon-primary ui-icon ui-icon-disk"></span>
        <span class="ui-button-text">Save</span>
    </button>
</div>
于 2013-03-01T10:20:55.463 回答
0

自己定义样式，如下所示：

.ui-icon-custom { background-image: url(images/custom.png); }

然后在调用 .button() 时使用它，如下所示：

$('#button').button({
  label: 'Test',
  icons: {primary: 'ui-icon-custom', secondary: null}
});

这假设您的自定义图标位于 CSS 下的 images 文件夹中……与 jQuery UI 图标映射通常位于相同的位置。创建图标时，它会得到一个像这样的类：class="ui-icon ui-icon-custom"，并且该 ui-icon 类看起来像这样（可能是不同的图像，取决于主题）：

.ui-icon { 
  width: 16px; 
  height: 16px; 
  background-image: url(images/ui-icons_222222_256x240.png); 
}

因此，在您的风格中，您只是覆盖该背景图像，如果需要更改宽度、高度等。

于 2013-03-01T10:32:50.830 回答