Изменение цвета кнопок пользовательского интерфейса jQuery

Есть ли простой способ изменить цвет jQuery UI Button? Изменение css не рекомендуется из документации, и в любом случае это сложно. Они говорят: "Мы рекомендуем использовать средство ThemeRoller для создания и загрузки настраиваемых тем, которые легко создавать и поддерживать". Я понимаю, как изменить тему, но тогда как вы получаете разные цветные кнопки на одной странице?

Ответ 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;
}

Ответ 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;
}

Ответ 3

Попробуйте следующее:

HTML:

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

JQuery

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