jQueryUI的按钮：如何更改按钮图标“色”

我在下面的方式放置在HTML按钮一个DIV内：jQueryUI的按钮：如何更改按钮图标“色”

<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按钮的图标颜色已更改为蓝色。

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

而且进一步，我需要在第三跨度的图标有ui-state-highlight效果（彩色）。

我试过应用ui-state-default，只是到第一个范围（包含图标），但没有给出预期的效果。

来源

2013-03-01 dan

重新编写适用于容器中的ui-state-highlight类（如的div和跨越）修复问题。

来源

2013-03-04 09:00:24 dan

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

编辑：

或修改外层div类UI状态默认：

<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-01 10:20:55

感谢您的回复。我在我的列表中错过了一件事。在同一个* div *里面包含另一个* span *，它显示了一个不同的图标，但必须使用'ui-state-highlight'（蓝色托盘）。如果我给给定的* png重新着色，我会放弃这种效果，不是吗？ – dan 2013-03-01 10:29:35

简单的方法是一类添加到您的按钮（不同颜色），然后有一些CSS覆写jQuery的UI CSS。

var $button = $(document.createElement('a')); 
//add class 
$button.addClass('redButton'); 
//call the jquery-ui button function 
$button.button();

CSS

.ui-button.redButton { 
    background-color: red; 
} 
.ui-button.greenButton { 
    background-color: green; 
}

来源

2013-03-01 10:24:34 Amrendra

定义自己的风格，就像这样：

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

然后打电话时.button（），像这样只是用它：

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

这假定您的自定义图标在images下的CSS文件夹......和jQuery UI图标地图通常一样。当图标的创建它得到这样一个类：class =“UI图标UI图标定制”，以及UI图标类看起来是这样的（可能是不同的图像，这取决于主题）：

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

所以在你的风格你只是替代在背景图片，如果需要更改宽度，高度等

来源

2013-03-01 10:32:50 gangakvp

感谢您的回复。请你确认我遵循的步骤。 ** [步骤01] **创建了一个'ui-icons_454545_256x240.png'作为jQuery UI图标地图的相同位置，并将其重命名为'custom.png' ** [步骤02] **创建了类'.ui-icon-custom'在我的网站css * ** [步骤03] **调用$（'＃button'）。button（）'例程。毕竟，我仍然得到*蓝色*图标。我错过了什么？再次感谢。 – dan 2013-03-01 11:42:46

而且这个解决方案是否覆盖了应用于父* div *的'ui-state-highlight'的样式仅适用于这个范围？稍后我稍微改变了我的原始问题:) – dan 2013-03-01 12:04:49

jQueryUI的按钮：如何更改按钮图标“色”

回答

相关问题