更改jQuery UI按钮的颜色

Question

有没有简单的方法来更改jQuery UI按钮的颜色？从文档中修改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; 
} 

Answer 3

试试这个：

HTML：

<button type="button" id="change_color"> change button </button> 

jQuery：

$("#change_color").css("background","green"); 

Answer 4

有两种（三种）JQueryUI按钮类型;基本上你做一个button这样的：

<span class="myButtons">Click here</span> 

那你告诉jQueryUI的，这是一个按钮：

$('span.myButtons').button() 

因此生产这种标记：

<span class="myButtons ui-button ui-corner-all ui-widget" role="button">Click here</span> 

你可以风格这个“经典“方式:(.myButtons {},.myButtons:hover {}等）

但是！

如果你的 “按钮” 是checkboxradio一个或controlgroup那么它的另一标记：

<fieldset> 
    <legend>Select a Location: </legend> 
    <label for="radio-1">New York</label> 
    <input type="radio" name="radio-1" id="radio-1"> 
    <label class"danger" for="radio-2">Paris</label> 
    <input type="radio" name="radio-1" id="radio-2"> 
    <label for="radio-3">London</label> 
    <input type="radio" name="radio-1" id="radio-3"> 
</fieldset> 

然后，如果你申请的方法：

$("input").checkboxradio(); 

你得到这个生成的标记（在第二个伪按钮，“巴黎”被检查/点击）：

<fieldset> 
     <legend>Select a Location: </legend> 
     <label for="radio-1" class="ui-checkboxradio-label ui-corner-all ui-button ui-widget ui-checkboxradio-radio-label"><span class="ui-checkboxradio-icon ui-corner-all ui-icon ui-icon-background ui-icon-blank"></span><span class="ui-checkboxradio-icon-space"> </span>New York</label> 
     <input name="radio-1" id="radio-1" class="ui-checkboxradio ui-helper-hidden-accessible" type="radio"> 
     <label for="radio-2" class="ui-checkboxradio-label ui-corner-all ui-button ui-widget ui-checkboxradio-radio-label ui-checkboxradio-checked ui-state-active"><span class="ui-checkboxradio-icon ui-corner-all ui-icon ui-icon-background ui-icon-blank"></span><span class="ui-checkboxradio-icon-space"> </span>Paris</label> 
     <input name="radio-1" id="radio-2" class="ui-checkboxradio ui-helper-hidden-accessible" type="radio"> 
     <label for="radio-3" class="ui-checkboxradio-label ui-corner-all ui-button ui-widget ui-checkboxradio-radio-label"><span class="ui-checkboxradio-icon ui-corner-all ui-icon ui-icon-background ui-icon-blank"></span><span class="ui-checkboxradio-icon-space"> </span>London</label> 
     <input name="radio-1" id="radio-3" class="ui-checkboxradio ui-helper-hidden-accessible" type="radio"> 
</fieldset> 

然后those classes可以（必须？）被用于设计伪“按钮”：

.ui-visual-focus { 
    box-shadow: none; 
} 

label.ui-checkboxradio.ui-state-default { 
    color: black; 
    background-color: teal; 
} 

label.ui-checkboxradio.danger.ui-state-active { 
    background-color: red; 
}