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

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

5 голосов
/ 08 марта 2010

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

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

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

Ответы [ 6 ]

5 голосов
/ 08 марта 2010

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

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

3 голосов
/ 10 мая 2013

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

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

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

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

Отлично работает!

2 голосов
/ 10 октября 2012

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

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

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

1 голос
/ 07 марта 2012

Я обнаружил, что это работает для меня: $ ( "BtnSave. ") RemoveClass (" щ-состояние по умолчанию ") addClass (" SaveButtonStyling");..

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

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

1 голос
/ 08 марта 2010

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

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

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

$("#buttonId, #anotherButton").removeClass().addClass("myClass");
0 голосов
/ 08 марта 2010

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

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

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

...