改變 jQuery UI 按鈕的顏色

問題描述

有沒有一個簡單的方法來改變一個 jQuery UI 按鈕的顏色？文件中不建議修改 css，反正這樣做很棘手。他們説：「我們建議您使用 ThemeRoller 工具來創建和下載易於構建和維護的自定義主題。」 我瞭解如何更改主題，但是如何在同一頁面上獲得不同的彩色按鈕？

最佳解決方法

我只是這樣做：用新的顏色按鈕創建一個新的主題; 複製..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;
}

次佳解決方法

最簡單的方法是將一個類添加到你的按鈕 (不同的顏色)，然後有一些 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;
}

第三種解決方法

嘗試這個：

HTML：

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

jQuery 的：

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

參考文獻

• Changing color of jQuery UI Buttons

注：本文內容整合自 Google/Baidu/Bing 輔助翻譯的英文資料結果。如果您對結果不滿意，可以加入我們改善翻譯效果：薇曉朵技術論壇。