Как применить тему CSS только к определенному элементу jQuery-UI?

У меня уже есть веб-сайт с моей собственной темой CSS. Я использую jQuery UI "вкладки" виджета, но не CSS из jQuery-UI.

Теперь я пытаюсь добавить виджет "Выбор даты" на одной из моих страниц. Было бы здорово, если бы я мог повторно использовать тему по умолчанию jQuery-UI, которая просто прекрасна.

Проблема заключается в том, что тема выбора даты также применяется к моим вкладкам CSS. Например, свойства css "ui-widget" применяются к элементам выбора даты и вкладок.

Я не могу найти способ применить свойства css только для выбора даты. Я не вижу "суперселектора", который применяется только к DIV выбора даты.

Каким будет лучший способ справиться с этим?

[EDIT] Виджет datepicker действительно является проблемой. Я не могу применить к нему стиль CSS. Вот стартовый код DIV, который появляется всплывающим:

<div style="position: absolute; top: 300.4px; left: 149px; display: block;" id="ui-datepicker-div" class="ui-datepicker ui-widget ui-widget-content ui-helper-clearfix ui-corner-all ui-helper-hidden-accessible"><div class="ui-datepicker-header ui-widget-header ui-helper-clearfix ui-corner-all">

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

Выбор даты в настоящее время refactored. Надеюсь, новый код рассмотрит эту проблему.

Ответы

Ответ 1

$(window).load(function() {
   $('#ui-datepicker-div').addClass('CSS-Scope-Class');
});

. addClass() Функция jQuery добавит необходимый класс к datepicker для его выбора вверх по тематической таблице стилей.

Мне пришлось привязываться к событию загрузки окна, а не к событию готовности документа, потому что датапикер еще не был вставлен.

Примечание. Будет небольшая задержка между тем, как датапикер добавляется в DOM и применяемый новый класс, что означает, что datepicker может выглядеть неизученным, пока страница заканчивает загрузку.

Ответ 2

Вы можете настроить тему с помощью ролика ролика здесь http://jqueryui.com/themeroller/

Найдите элемент, который хотите стилизовать, с помощью функции DOM Firebug, чтобы настроить целевой класс, который вы хотите выбрать.

Ответ 3

У меня была такая же проблема с дампикером и аккордеон. Я хотел новый стиль дампикера, но не хотел его для аккордеона. Я сделал легкий выход, я скопировал соответствующие части ui.theme.css и добавил .ui-datepicker перед всеми стилями. Это предназначено только для datepicker и оставляет все остальные плагины пользовательского интерфейса.

Я не уверен, был ли это лучший способ, но он работал для моих целей.

Ответ 4

Я мог бы что-то упустить, но не мог бы вы просто добавить класс в свой объект выбора даты и выбрать его?

Ответ 5

Попробуйте: $('#cmsContent').css('margin', '0');

Ответ 6

Просто добавление класса css в div datepicker не сработало для меня, мне пришлось создать еще один div вокруг него так:

$("#ui-datepicker-div").wrap('<div class="CSS-Scope-Class" />');

Ответ 7

Это работает для меня

$("#ui-datepicker-div").wrap("<div class='Your-CSS-Scope-Class'></div>");