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

Question

У меня уже есть сайт с собственной темой 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 scope . Но это не так. Я застрял вручную, редактируя файл jQuery CSS.

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

Answer 1

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

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

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

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

Answer 2

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

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

Answer 3

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

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

Answer 4

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

Answer 5

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

Answer 6

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

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

Answer 7

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

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