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

gt0wga4j 于 2023-06-25 发布在 jQuery

关注(0)|答案(3)|浏览(177)

我尝试在用户使用jQuery UI Themeselector更改页面主题时更改主体背景颜色。
我试过这个

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

然后我在documentready上调用它（设置初始主题背景），并像这样将其设置为ThemeSelector的onClose事件;

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

在Firefox中不做任何事情，似乎落后于Chrome的变化，选择器似乎在IE8中根本不起作用。
关于如何更改背景以更好地匹配所选jQuery UI主题有什么建议吗？
谢谢！

css

来源：https://stackoverflow.com/questions/3490003/how-to-change-background-color-to-match-jquery-ui-theme-via-themeselector

3条答案

按热度按时间

nr9pn0ug1#

一个更好的方法是不使用计时器，只使用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        */
}

赞(0）回复(0）举报 2023-06-25

0pizxfdo2#

错误修复使用超时...
在themeswitchertool.js中查找函数updateCSS（）

After$（“head”）.append（cssLink）;

添加下面一行增加超时，如果它仍然不工作...

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

赞(0）回复(0）举报 2023-06-25

unftdfkk3#

你的js中有一个错误（使用了“instead of”）：

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

赞(0）回复(0）举报 2023-06-25

我来回答

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

3条答案

相关问题

热门标签

最新问答