改变jQuery UI按钮的颜色

Question

有没有一种简单的方法来改变jQuery UI Button的颜色？不鼓励修改css文档,这样做无论如何都很棘手.他们说,"我们建议使用ThemeRoller工具来创建和下载易于构建和维护的自定义主题." 我理解如何更改主题,但是如何在同一页面上获得不同的彩色按钮？

Answer 1

我刚刚这样做:使用新的颜色按钮创建一个新主题; 从新主题图片文件夹中复制..hard ..和..soft ...渐变文件; 重命名它们,以免使它们与主题混淆; 最后将样式添加到按钮.这适合渐变和颜色......

我刚尝试这个绿色按钮:

a.green-button
{
    background: url(Images/GreenBGHardGrad.png) repeat-x center;
    border: 1px solid #132b14;
    color:#FFFFFF;
}
a.green-button:hover
{ 
    background: url(Images/GreenBGSoftGrad.png) repeat-x center;
    border: 1px solid #132b14;
    color:#FFFFFF;
}
a.green-button:active
{
    background-color:#FFFFFF;
    border: 1px solid #132b14;
    color:#132b14;
}

Answer 2

最简单的方法是在按钮中添加一个类(用于不同的颜色),然后使用一些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;
}