Кнопка пользовательского интерфейса jQuery: как переопределить классы, используемые для одной кнопки?

Question

Я использую библиотеку jQuery UI из коробки, основанную на теме.

Замечательно иметь ссылки, отображаемые в виде кнопок, но мне нужно переопределить некоторые кнопки разными цветами.

Как мне указать определенный класс для конкретной кнопки?

Answer 1

Я бы сказал, дать конкретную кнопку или кнопки идентификатор, и:

$("#buttonId").removeClass().addClass("myClass");

Если вы хотите применить его к нескольким кнопкам, каждая из которых имеет свой идентификатор:

$("#buttonId, #anotherButton").removeClass().addClass("myClass");

Answer 2

Я рекомендую посмотреть на CSS для кнопок пользовательского интерфейса jQuery и продублировать структуру CSS, которая задает кнопки, но с вашим собственным классом вместо классов пользовательского интерфейса jQuery. Сделайте переопределения, которые вам нужны в этом CSS, и включите его после CSS jQuery UI. CSS использует комбинацию наиболее определенного селектора и порядка, чтобы определить, какие значения применять. Сделав это, вы убедитесь, что у вас одинаковая специфика для каждого из селекторов CSS, используемых jQuery, чтобы ваш CSS имел приоритет в зависимости от порядка.

В Smashing Magazine есть статья, в которой, вероятно, содержится больше информации, чем вы хотите знать о проблеме специфики.

Answer 3

Вы также можете:

1. Используйте инструменты разработчика в браузере (у Chrome есть отличные).
2. Посмотрите, какой класс из пользовательского интерфейса jQuery определяет цвет кнопки.
3. Переопределите его в своем CSS-файле с помощью атрибута "Important".

Например, когда мне нужно было переопределить элемент управления вращением jQuery UI и удалить границы, я нашел класс, который определяет границы с помощью Chrome Dev Tools. Затем в CSS: я добавил что-то вроде этого:

.<jquery-ui-class-that-i-found> { border: 0px !important; }

Работает отлично!

Answer 4

Я думаю, что API кнопки должен включать такую ​​конфигурацию, где вы можете изменить цвет и т. Д., Передав параметры

$("button").button({background:"FFFFFF",hover:"FFFFF"}); 

это просто идея, где вы можете изменить некоторые из его визуальных атрибутов.

Answer 5

Я обнаружил, что это работает для меня: $(". BtnSave"). RemoveClass("ui-state-default"). AddClass("SaveButtonStyling");

В основном необходимо удалить класс ui-state-default, а затем добавить свой собственный для цвета фона и т. Д.

Это означало, что класс закругленных углов и т. Д. Остался на месте, и я смог изменить цвет фона и т. Д.

Answer 6

Если вы просто хотите иметь некоторые дополнительные / разные для определенных кнопок, просто дайте кнопкам несколько классов, таких как class="mybuttonclass otherbuttonclass" - допускается несколько классов. Затем просто добавьте правила CSS для вашего класса (ов)

.mybuttonclass
{
   background-color: red;
}
.otherbuttonclass
{
   color:white;
}

таким образом, фон красного цвета с белым текстом - или любой другой комбинацией, которую вы хотите, чтобы переопределить элементы в каскаде (CSS) над ним. (Предполагается, что ваш файл.CSS связан в ПОСЛЕ файла jssery UI css или находится на странице, оба из которых переопределяют jQuery UI css.