twitter-bootstrap 单击主题下拉菜单后如何动态更改主题
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/19192747/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to dynamically change themes after clicking a drop down menu of themes
提问by Ferdinand Balbin
I'm using bootstrap for the interface of the website I'm developing. I am also planning to integrate the bootswatch themes to my site. I have created a dropdown menu containing the different themes of bootswatch. My problem is how can I switch themes when I click one of the themes in the dropdown menu?
我正在将引导程序用于我正在开发的网站的界面。我还计划将 bootswatch 主题集成到我的网站中。我创建了一个包含 bootswatch 不同主题的下拉菜单。我的问题是如何在单击下拉菜单中的主题之一时切换主题？
回答by Kevin Pei
Fiddle:http://jsfiddle.net/82AsF/(click the themes dropdown in the navbar)
Give your links a class theme-linkand a data-themevalue of the theme name like so:
小提琴：http : //jsfiddle.net/82AsF/（单击导航栏中的主题下拉菜单）为
您的链接提供一个类theme-link和data-theme主题名称的值，如下所示：
<a href="#" data-theme="amelia" class="theme-link">Amelia</a>
Then, define your themes in a global variable like so:
然后，在全局变量中定义您的主题，如下所示：
var themes = {
"default": "//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css",
"amelia" : "//bootswatch.com/amelia/bootstrap.min.css",
"cerulean" : "//bootswatch.com/cerulean/bootstrap.min.css",
"cosmo" : "//bootswatch.com/cosmo/bootstrap.min.css",
"cyborg" : "//bootswatch.com/cyborg/bootstrap.min.css",
"flatly" : "//bootswatch.com/flatly/bootstrap.min.css",
"journal" : "//bootswatch.com/journal/bootstrap.min.css",
"readable" : "//bootswatch.com/readable/bootstrap.min.css",
"simplex" : "//bootswatch.com/simplex/bootstrap.min.css",
"slate" : "//bootswatch.com/slate/bootstrap.min.css",
"spacelab" : "//bootswatch.com/spacelab/bootstrap.min.css",
"united" : "//bootswatch.com/united/bootstrap.min.css"
}
(please host these bootswatch css files on your own server when you do this - I'm only hotlinking because I don't have a server on hand)
Then, use the following jQuery code:
（执行此操作时，请将这些 bootswatch css 文件托管在您自己的服务器上 - 我只是盗链，因为我手头没有服务器）
然后，使用以下 jQuery 代码：
$(function(){
var themesheet = $('<link href="'+themes['default']+'" rel="stylesheet" />');
themesheet.appendTo('head');
$('.theme-link').click(function(){
var themeurl = themes[$(this).attr('data-theme')];
themesheet.attr('href',themeurl);
});
});
回答by Umar Abbas
the main problem with above solution if page is refreshed the theme is gone. i found this article very helpful regarding persistent theme in the browser because it save setting in browser's storage.
如果页面刷新，上述解决方案的主要问题是主题消失了。我发现这篇文章对于浏览器中的持久主题非常有帮助，因为它将设置保存在浏览器的存储中。
i hope it helps you
我希望它能帮助你
回答by lucas
The solution provided by Kevin is great. I have just spent some time trying to figure out how I can make it work with local bootswatch libraries.
凯文提供的解决方案很棒。我刚刚花了一些时间试图弄清楚如何让它与本地 bootswatch 库一起工作。
The typical href attribute value:
典型的 href 属性值：
"~/lib/bootstrap/dist/css/bootstrap.min.css"
But in this case:
但在这种情况下：
var themes = {
"default": "lib/bootstrap/dist/css/bootstrap.min.css",
"amelia": "lib/bootswatch/amelia/bootstrap.min.css",
"cerulean": "lib/bootswatch/cerulean/bootstrap.min.css",
"cosmo": "lib/bootswatch/cosmo/bootstrap.min.css",
"cyborg": "lib/bootswatch/cyborg/bootstrap.min.css",
"flatly": "lib/bootswatch/flatly/bootstrap.min.css",
"journal": "lib/bootswatch/journal/bootstrap.min.css",
"readable": "lib/bootswatch/readable/bootstrap.min.css",
"simplex": "lib/bootswatch/simplex/bootstrap.min.css",
"slate": "lib/bootswatch/slate/bootstrap.min.css",
"spacelab": "lib/bootswatch/spacelab/bootstrap.min.css",
"united": "lib/bootswatch/united/bootstrap.min.css"
}
回答by davfive
I based mine off of @KevinPei's answer to make an automatic dropdown using jQuery, Bootstrap, and Bootswatch to add a dropdown to the navbar that automatically updates the theme to the selected value.
我基于@KevinPei 的回答，使用 jQuery、Bootstrap 和 Bootswatch 制作自动下拉菜单，向导航栏添加下拉菜单，自动将主题更新为所选值。
Fiddle:https://jsfiddle.net/davfive/uwseLLzf/show
小提琴：https : //jsfiddle.net/davfive/uwseLLzf/show
The code works great in practice. However, in jsfiddle, there are two odd behaviors:
该代码在实践中效果很好。但是，在 jsfiddle 中，有两种奇怪的行为：
- Sometimes the dropdown extends to the whole screen
- The dropdown's mouseover/hover color isn't showing in jsfiddle.
- 有时下拉菜单会延伸到整个屏幕
- 下拉菜单的鼠标悬停/悬停颜色未显示在 jsfiddle 中。
<html lang="en">
<head>
<!-- To switch themes, go to https://www.bootstrapcdn.com/bootswatch/?theme=0 -->
<link href="https://maxcdn.bootstrapcdn.com/bootswatch/3.3.7/cerulean/bootstrap.min.css" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="navbar navbar-default navbar-static-top">
<div class="container-fluid">
<a class="navbar-brand">Bootswatch Theme Changer</a>
<div class="nav navbar-nav pull-right">
<li id="theme-button" class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Change Theme <b class="caret"></b></a>
<ul class="dropdown-menu ">
<li><a href="#" name="current">Cerulean</a></li>
<li class="divider"></li>
<li><a href="#" name="cerulean">Cerulean</a></li>
<li><a href="#" name="cosmo">Cosmo</a></li>
<li><a href="#" name="cyborg">Cyborg</a></li>
<li><a href="#" name="darkly">Darkly</a></li>
<li><a href="#" name="flatly">Flatly</a></li>
<li><a href="#" name="journal">Journal</a></li>
<li><a href="#" name="lumen">Lumen</a></li>
<li><a href="#" name="paper">Paper</a></li>
<li><a href="#" name="readable">Readable</a></li>
<li><a href="#" name="sandstone">Sandstone</a></li>
<li><a href="#" name="simplex">Simplex</a></li>
<li><a href="#" name="slate">Slate</a></li>
<li><a href="#" name="solar">Solar</a></li>
<li><a href="#" name="spacelab">Spacelab</a></li>
<li><a href="#" name="superhero">Superhero</a></li>
<li><a href="#" name="united">United</a></li>
<li><a href="#" name="yeti">Yeti</a></li>
</ul>
</li>
</div>
</div>
</div>
<script>
jQuery(function($) {
$('#theme-button ul a').click(function() {
if ($(this).attr('name') != 'current') {
var urlbeg = 'https://maxcdn.bootstrapcdn.com/bootswatch/3.3.7/'
var urlend = '/bootstrap.min.css'
var themeurl = urlbeg + $(this).text().toLowerCase() + urlend;
var link = $('link[rel="stylesheet"][href$="/bootstrap.min.css"]').attr('href', themeurl);
$('#theme-button ul a[name="current"]').text($(this).text());
}
});
});
</script>
</body>
</html>
回答by aditya
you can try something like this
你可以试试这样的
html:
html：
<link href="/Themes/DefaultClean/Content/css/styles.css" id="theme-sheet" rel="stylesheet" type="text/css" />
javascript:
javascript:
function setTheme(themeName) {
$('#theme-sheet').attr({ href: "https://bootswatch.com/slate/bootstrap.min.css" });;
}
where in the setTheme function will be called from your desired source such as dropdown or button.
在 setTheme 函数中，将从所需的源（例如下拉列表或按钮）调用的位置。
