当前位置：文江博客话题详情

动态切换 JQuery 主题？

发布于 2024-09-05 06:24:13 字数 52 浏览 4 评论 0原文

如果我下载多个 JQuery 主题，如何让 Web 应用程序的用户能够在主题之间动态切换？

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

滴情不沾 2024-09-12 06:24:13

Nick Craver 的评论是正确的，主题切换器小部件非常理想：
~~http://jqueryui.com/docs/Theming/ThemeSwitcher~~
新链接： https://github.com/harborhoffer/Super-Theme-Switcher

回复收藏 0 原文

回心转意 2024-09-12 06:24:13

除了主题切换器之外，您还可以通过删除当前主题的链接来动态更改主题。添加新主题的新链接。
这样做的好处是您还可以更改自己的主题。

请参阅下面的 Ansatz

<head>
<link href="./jquery-ui-first/jquery-ui.css" id="qtheme" rel="stylesheet">
<link href="./css/specials-first.css" id="mtheme" rel="stylesheet">
</head>

现在考虑在单击按钮时更改主题：

$(#otherthemebutton).click(function(){
    $("#qtheme").remove();
    $("#mtheme").remove();
    qelem = loadCss("./jquery-ui-other/jquery-ui.css","qtheme");
    qelem = loadCss("./css/specials-other.css","mtheme");
    document.getElementsByTagName("head")[0].appendChild(qelem);
    document.getElementsByTagName("head")[0].appendChild(melem);
});

loadCss = function(filename,id) {
    var elem=document.createElement("link");
    elem.id=id;
    elem.rel="stylesheet";
    elem.type="text/css";
    elem.href=filename;
    return elem;
}

您需要确保底层（外部）javascript 适用于相同版本。

Apart from the themeswitcher, you can do change the theme dynamically by removing the links to the current theme. Add new links with the new theme.
This enjoys the advantage that you can change also your own themes.

See below for an Ansatz

<head>
<link href="./jquery-ui-first/jquery-ui.css" id="qtheme" rel="stylesheet">
<link href="./css/specials-first.css" id="mtheme" rel="stylesheet">
</head>

Now consider to change the theme upon a button clicked :

$(#otherthemebutton).click(function(){
    $("#qtheme").remove();
    $("#mtheme").remove();
    qelem = loadCss("./jquery-ui-other/jquery-ui.css","qtheme");
    qelem = loadCss("./css/specials-other.css","mtheme");
    document.getElementsByTagName("head")[0].appendChild(qelem);
    document.getElementsByTagName("head")[0].appendChild(melem);
});

loadCss = function(filename,id) {
    var elem=document.createElement("link");
    elem.id=id;
    elem.rel="stylesheet";
    elem.type="text/css";
    elem.href=filename;
    return elem;
}

You need to ensure that the underlying (external) javascript is for the same version.

回复收藏 0 原文

~没有更多了~