我正在使用引导程序来开发我正在开发的网站界面。我也计划将靴子主题集成到我的网站。我创建了一个包含bootswatch不同主题的下拉菜单。我的问题是,当我点击下拉菜单中的某个主题时,如何切换主题?如何在点击主题下拉菜单后动态更改主题
回答
小提琴:http://jsfiddle.net/82AsF/(点击导航条上的主题下拉)
给你的链接一类theme-link
和像这样一个data-theme
值的主题名称:
<a href="#" data-theme="amelia" class="theme-link">Amelia</a>
然后,定义在你的主题像这样的全局变量:
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"
}
(请托管自己的服务器上,这些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);
});
});
与如果页面被刷新主题消失了上述解决方案的主要问题。 我发现这篇文章对于浏览器中的持久主题非常有帮助,因为它将设置保存在浏览器的存储中。
我希望它可以帮助你
由凯文提供的是伟大的解决方案。我刚刚花了一些时间试图弄清楚如何使它能够与本地的bootswatch库一起工作。
典型的href属性值:
"~/lib/bootstrap/dist/css/bootstrap.min.css"
但在这种情况下:
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"
}
,你可以尝试这样的事情
HTML:
<link href="/Themes/DefaultClean/Content/css/styles.css" id="theme-sheet" rel="stylesheet" type="text/css" />
的javascript:
function setTheme(themeName) {
$('#theme-sheet').attr({ href: "https://bootswatch.com/slate/bootstrap.min.css" });;
}
其中在setTheme功能将被调用从期望的源,诸如下拉或按钮。
我基于@ KevinPei的答案使用jQuery,Bootstrap和Bootswatch自动下拉菜单,将下拉菜单添加到自动更新主题到选定值的导航栏中。
小提琴:https://jsfiddle.net/davfive/uwseLLzf/show
的代码在实践中的伟大工程。然而,在的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>
我无法在我的应用程序上运行您的代码 –
感谢您的支持,并且非常抱歉您不得不这样做。我忘了在引导程序和jquery中包含
中的脚本链接。我已经更新并测试了它在jsfiddle之外的作用。 – davfive- 1. 用下拉菜单改变Kickstrap主题?
- 2. 在wordpress主题下拉菜单
- 3. 更改GWT主题动态
- 4. 更改Android主题动态
- 5. 动态更改主题
- 6. 如何动态更改prestashop主题
- 7. 硒点击标题从下拉菜单
- 8. 激活下拉菜单时动态更改标题的位置
- 9. jquery手机:点击更改主题
- 10. 如何通过点击更改主题的标题?
- 11. 动态更改活动主题
- 12. 如何创建子菜单/在WordPress 3.8.1 Bizway主题下拉菜单
- 13. WordPress的:如何插入WP主题的下拉菜单?
- 14. 如何禁用Prestashop中联系表单上的主题标题下拉菜单
- 15. 如何在woprdpress中按主题创建菜单主题?
- 16. 什么是主题/样式用于主题溢出下拉菜单
- 17. 动态更改JWT主题字段
- 18. 动态更改JQuery Mobile数据主题
- 19. Android来动态更改APP主题
- 20. 动态更改jQuery TimePicker主题
- 21. WPF和MVVM - 动态更改主题
- 22. 使用PHP动态更改主题
- 23. 如何点击按钮更改下拉菜单的内容?
- 24. 如何将WP下拉菜单从悬停更改为点击
- 25. 如何更改PreferenceActivity主题?
- 26. 如何更改JOptionPane主题
- 27. 如何更改Eclipse主题?
- 28. 如何更改WooThemes Resort主题导航栏的颜色(下拉箭头,下拉菜单等)?
- 29. 如何在Drupal中主题菜单块?
- 30. 如何更改导航菜单中的主页标题文本?
感谢答。这真的很有帮助! –
感谢这给了我一个伟大的开始,类似的东西。 –
感谢您的回答Kevin – Harsha