twitter bootstrap - sublime - Cómo cambiar dinámicamente los temas después de hacer clic en un menú desplegable de temas
menus en html codigo (5)
Estoy usando bootstrap para la interfaz del sitio web que estoy desarrollando. También estoy planeando integrar los temas de bootswatch en mi sitio. He creado un menú desplegable que contiene los diferentes temas de bootswatch. Mi problema es ¿cómo puedo cambiar los temas cuando hago clic en uno de los temas en el menú desplegable?
Basé la mía en la respuesta de @Kevepei para hacer un menú desplegable automático utilizando jQuery, Bootstrap y Bootswatch para agregar un menú desplegable a la barra de navegación que actualiza automáticamente el tema al valor seleccionado.
Fiddle: https://jsfiddle.net/davfive/uwseLLzf/show
El código funciona muy bien en la práctica. Sin embargo, en jsfiddle, hay dos comportamientos impares:
- A veces el desplegable se extiende a toda la pantalla.
- El color del mouseover / hover del menú desplegable no se muestra en 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>
La solución proporcionada por Kevin es genial. Acabo de pasar un tiempo tratando de averiguar cómo puedo hacer que funcione con las bibliotecas de arranque locales.
El valor del atributo href típico:
"~/lib/bootstrap/dist/css/bootstrap.min.css"
Pero en este caso:
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"
}
el problema principal con la solución anterior si la página se actualiza, el tema desaparece. Encontré este artículo muy útil con respecto al tema persistente en el navegador porque guarda la configuración en el almacenamiento del navegador.
Espero que te ayude
puedes probar algo como esto
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" });;
}
donde en la función setTheme se llamará desde la fuente deseada, como el menú desplegable o el botón.
Fiddle: http://jsfiddle.net/82AsF/ (haga clic en el menú desplegable de temas en la barra de navegación)
Proporcione a sus enlaces un theme-link clase y un valor de tema de datos del nombre del tema, de este modo:
<a href="#" data-theme="amelia" class="theme-link">Amelia</a>
Luego, define tus temas en una variable global así:
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"
}
(por favor, aloja estos archivos css de bootswatch en tu propio servidor cuando hagas esto; solo estoy enganchando porque no tengo un servidor a la mano)
Luego, usa el siguiente código 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);
});
});