Как изменить цвет фона в соответствии с темой JQuery UI через ThemeSelector?

Question

Я пытаюсь изменить цвет фона тела, когда пользователь меняет тему страницы с помощью jQuery UI Themeselector.

Я пробовал это

function updateBodyBackground() {
    $("body").css('background-color', $('.ui-widget-header:first").css("background-color") + ' !important;');
}

Затем я вызываю егоготов к документу (чтобы установить исходный фон темы), и я установил его на событие onClose для ThemeSelector следующим образом:

$function() {
    updateBodyBackground();
    $('#switcher').themeswitcher({ expires: 365, path: '/', loadTheme: "sunny", onClose: updateBodyBackground });
}

Ничего не делает в Firefox, похоже, стоит за изменением в Chromeи селектор, похоже, вообще не работает в IE8.

Есть предложения о том, как изменить фон для лучшего соответствия выбранной теме пользовательского интерфейса jQuery?

Спасибо!

Answer 1

Лучше не использовать таймер, просто используйте один из классов jQueryUI CSS с цветом фона, который вы ищете, в моем случае мне нравится цвет фона, выбранный с помощью: ui-state-hover:

<div id= "main_background" class= "ui-state-hover">
// Your Content
</div>

Поскольку id отменяет все настройки class, используйте id для удаления или изменения любых нежелательных настроек, используемых ui-state-hover, таких как background-image:

#main_background {
    position: relative;
    top: 0px;
    left: 0px;
    width: 800px;
    height: 742px;
    margin: 0px;
    border: 0px;
    padding: 5px;
    background-image:none;  // kills the background url (image) that ui-state-hover sets
 }

Answer 2

У вас была ошибка в вашем js (использовалось "вместо"):

$('.ui-widget-header:first")

Должно быть:

$('.ui-widget-header:first')

Но я обнаружил, что это работает. Нет необходимости помещать в Themeswitchertool.js, сбросив setTimeout до 500, чтобы он изменился быстрее.

function updateBodyBackground() {setTimeout("$('body').css('background-color', $('.ui-widget-header:first').css('background-color'))", 500);
}

$('#switcher').themeswitcher({ expires: 365, path: '/', loadTheme: "sunny", onClose: updateBodyBackground });

Answer 3

Исправление ошибки с использованием тайм-аута ...

поиск функции updateCSS () внутри themeswitchertool.js

После $ ("head"). Append (cssLink);

Добавьте указанную ниже задержку увеличения строки, если она все еще не работает ...

Вставьте setTimeout ("$ ('body'). Css ('background-color ', $ ('. ui-widget-header: first '). css (' background-color ')) ", 2000);