Question

当用户使用jQuery UI Themeselector更改页面主题时，我正在尝试更改正文背景颜色。

我试过这个

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

然后我在文件准备就绪（设置初始主题背景）上调用它，然后我将它设置为ThemeSelector的onClose事件，就像这样;

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

在Firefox中没有做任何事情，似乎落后于Chrome中的变更，而IE8中的选择器似乎根本不起作用。

有关如何更改背景以更好地匹配所选jQuery UI主题的任何建议吗？

谢谢！

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

使用超时修复错误...

在themeswitchertool.js

中找到函数updateCSS（）

<强>后 $（ “头”）附加（cssLink）;

如果仍然无效，请添加以下行增加超时...

插入 setTimeout（“$（'body'）。css（'background-color'，$（'。ui-widget-header：first'）。css（'background-color'））”，2000）;

Answer 3

您的js中有错误（使用＆＃34;而不是＆＃39;）：

$('.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 });

如何通过ThemeSelector更改背景颜色以匹配jQuery UI主题？

3 个答案: