Question

我有一个系统，我把这个引导主题包含在这个：

所以他们可以选择主题但是当他们刷新时它会回到我设置的默认值。有没有一种方法，当他们选择一个主题时，即使刷新后它也会保持不变？

这是我的代码：

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

下面的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/

Answer 2

尝试使用jQuery的quest.find("span.quest_bind").attr("ng-bind", "quest" + seq);。这是一个包含下拉列表的示例。只要用户单击其中一个下拉选项，主题就会更改并保存。

<强>的jQuery

localStorage

<强> HTML

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

以及<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>

永久应用bootstrap主题

2 个答案: