Я использую bootstrap для интерфейса веб-сайта, который я разрабатываю. Я также планирую интегрировать темы bootswatch на свой сайт. Я создал раскрывающееся меню, содержащее разные темы bootswatch. Моя проблема в том, как я могу переключать темы при нажатии одной из тем в раскрывающемся меню?
Как динамически изменять темы после нажатия выпадающего меню тем
Ответ 1
Fiddle: 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"
}
(пожалуйста, размещайте эти файлы css bootswatch на своем собственном сервере, когда вы это делаете - я просто hotlinking, потому что у меня нет сервера под рукой)
Затем используйте следующий код 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);
});
});
Ответ 2
Основная проблема с вышеупомянутым решением, если страница обновлена, тема ушла. Я нашел эту статью очень полезной в отношении постоянной темы в браузере, потому что она сохраняет настройки в памяти браузера.
Надеюсь, это поможет вам.
Ответ 3
Решение Кевина отлично. Я только что потратил некоторое время, пытаясь понять, как я могу заставить его работать с локальными библиотеками 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"
}
Ответ 4
вы можете попробовать что-то вроде этого
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 будет вызываться из нужного источника, например выпадающего меню или кнопки.
Ответ 5
Я основывался на ответе @KevinPei, чтобы автоматическое выключение с помощью jQuery, Bootstrap и Bootswatch, чтобы добавить раскрывающееся меню на навигационную панель, которая автоматически обновляет тему до выбранного значения.
Fiddle: 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="#" onclick="location.href='https://maxcdn.bootstrapcdn.com/bootswatch/3.3.7/cerulean/bootstrap.min.css'; return false;" 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>