Блог

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

В идеале я не хочу менять jQuery CSS amp; js, которые у меня есть. Я посмотрел на сгенерированный CSS, и похоже, что мне пришлось бы скопировать много материала, чтобы поместить его во второй класс, а затем мне каким-то образом пришлось бы применить все эти классы к элементам, которые я хочу оформить в стиле второй кнопки.

Есть ли способ легко добавить стили виджетов в jQuery UI, «наследуя», так сказать, от существующих стилей виджетов и просто переопределяя некоторые атрибуты? Спасибо.

У вас есть ThemeRoller для jQueryUI, где вы можете создать свою собственную тему. Это самый простой способ.

В противном случае, если я хочу использовать пользовательскую кнопку вместо того, что поставляется с jQueryUI, что я делаю, это выбираю стиль кнопки jquery по умолчанию (скажем, класс .ui-button ) и создаю селектор с более высоким значением и изменяю только те настройки, которые мне нужны, чтобы они были другими (обычно фоновое изображение, отступы, границы — вы не хотите менять css, связанный с макетом, поскольку это может испортить ваши виджеты).

Что-то вроде:

 .ui-button {default jquery css style}
.my-custom-form .ui-button {my custom css style}
  

и это переопределит ваш стиль. Все, что вам нужно позаботиться, это о том, чтобы ваш селектор был более мощным, чем тот, что в файле jQueryUI css. Вы можете поместить ее в свой файл .css, если ее использование в css по умолчанию кажется вам неаккуратным. Обычно у меня есть div, который оборачивает мое поле ввода или контейнер кнопок, и я добавляю к нему пользовательский идентификатор или класс и использую этот класс / идентификатор для оформления моей кнопки.