永久应用 bootstrap 主题

Question

我有一个系统，其中包含 bootstrap 个主题，例如这个：

所以他们可以选择主题，但是当他们刷新时，它会恢复到我设置的默认值。有没有办法让他们选择主题后即使刷新也能保持不变？

这是我的代码：

jQuery:

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"
}



$(function(){
var themesheet = $('<link href="'+themes['simplex']+'" rel="stylesheet" />');
themesheet.appendTo('head');
$('.theme-link').click(function(){
   var themeurl = themes[$(this).attr('data-theme')]; 
    themesheet.attr('href',themeurl);
});
});

我在 html 中的下拉列表：

<li class="dropdown">
  <ul class="nav navbar-nav">
    <li class="dropdown">
        <a href="#" class="dropdown-toggle" data-toggle="dropdown"><i class="glyphicon glyphicon-star"></i> Themes <b class="caret"></b></a>
        <ul class="dropdown-menu">
                <li><a href="#" data-theme="default" class="theme-link">Default</a></li>
                <li><a href="#" data-theme="amelia" class="theme-link">Amelia</a></li>
                <li><a href="#" data-theme="cerulean" class="theme-link">Cerulean</a></li>
                <li><a href="#" data-theme="cosmo" class="theme-link">Cosmo</a></li>
                <li><a href="#" data-theme="cyborg" class="theme-link">Cyborg</a></li>
                <li><a href="#" data-theme="flatly" class="theme-link">Flatly</a></li>
                <li><a href="#" data-theme="journal" class="theme-link">Journal</a></li>
                <li><a href="#" data-theme="readable" class="theme-link">Readable</a></li>
                <li><a href="#" data-theme="simplex" class="theme-link">Simplex</a></li>
                <li><a href="#" data-theme="slate" class="theme-link">Slate</a></li>
                <li><a href="#" data-theme="spacelab" class="theme-link">Spacelab</a></li>
                <li><a href="#" data-theme="united" class="theme-link">United</a></li>
        </ul>
    </li>
  </ul>
</li>

Answer 1

尝试使用 jQuery 的 localStorage。这是一个包含下拉列表的示例。每当用户单击其中一个下拉选项时，主题就会更改并保存。

jQuery

if(localStorage.theme)
    $('link#theme').attr('href', localStorage.theme);

$('#teal').click(function() {
    $('link#theme').attr('href', "src/components/styles/mainTeal.css");
    localStorage.theme = "mainTeal.css";
})

$('#gray').click(function() {
    $('link#theme').attr('href', "src/components/styles/mainGray.css");
    localStorage.theme = "mainGray.css";
})

$('#violet').click(function() {
    $('link#theme').attr('href', "src/components/styles/mainViolet.css");
    localStorage.theme = "mainViolet.css";
})

$('#plum').click(function() {
    $('link#theme').attr('href', "src/components/styles/mainPlum.css");
    localStorage.theme = "mainPlum.css";
})

HTML

<div class="btn-group">
    <button class="btn btn-primary dropdown-toggle" data-toggle="dropdown" type="button" aria-haspopup="true" aria-expanded="false">
        Themes <span class="caret"></span>
    </button>
    <div class="dropdown-menu center">
        <div class="btn-teal btn-sm" id="teal">Teal</div>
        <div class="btn-gray btn-sm" id="gray">Gray</div>
        <div class="btn-plum btn-sm" id="plum">Plum</div>
        <div class="btn-violet btn-sm" id="violet">Violet</div>
    </div>
    <div id="themes"></div>
</div>

并在 <head>

<link rel="stylesheet" id="theme" href="" type="text/css">

Answer 2

下面的 JS 将允许您使用 cookie 来存储您的主题信息。我会注意到我将 cookie 过期日期设置为从设置时间起一周。它可以设置任何时间，我只是认为一周是一个很好的起点。此脚本会在每次运行时检查 cookie。如果 cookie 不存在，它将加载 default 主题。否则，它将显示基于 cookie 的主题。每次更改主题时都会更改 cookie 信息。

JS:

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"
}

$(function(){
    function getCookie(c_name) {
        if (document.cookie.length > 0) {
            c_start = document.cookie.indexOf(c_name + "=");
            if (c_start != -1) {
                c_start = c_start + c_name.length + 1;
                c_end = document.cookie.indexOf(";", c_start);
                if (c_end == -1) c_end = document.cookie.length;
                return unescape(document.cookie.substring(c_start, c_end));
            }
        }
        return "default";
    }

    function setCookie(c_name, value) {
        var exdate = new Date();
        exdate.setDate(exdate.getDate() + 7);
        document.cookie = c_name + "=" + escape(value) + ";path=/;expires=" + exdate.toUTCString();
    }

    var setTheme = getCookie('setTheme');

    var themesheet = $('<link href="'+themes[getCookie('setTheme')]+'" rel="stylesheet" />');

    themesheet.appendTo('head');

    $('.theme-link').click(function(){
        var themeurl = themes[$(this).attr('data-theme')]; 
        setCookie('setTheme', $(this).attr('data-theme'));
        themesheet.attr('href',themeurl);
    });
});

演示： http://jsfiddle.net/hopkins_matt/82AsF/127/

永久应用 bootstrap 主题

Permanently apply bootstrap theme

html

css

user-interface

themes

twitter-bootstrap