更改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; 
}