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

Question

当用户使用 jQuery UI 主题选择器更改页面主题时，我试图更改主体背景颜色。

我试过了

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
 }