Question

可能之前已经有人问过，但我还没有找到任何有用或完整的答案。我们如何切换样式表并保存使用jQuery cookie选择的样式表？所以我有5个样式表位于同一个文件夹中，下面的jQuery代码会自动创建一个select元素。我可以在样式表之间切换，但我不知道如何保存已选中的样式。谢谢。

<link href="styles/black.css" rel="stylesheet" type="text/css" title="black">
<link href="styles/blue.css" rel="stylesheet" type="text/css" title="blue">
<link href="styles/green.css" rel="stylesheet" type="text/css" title="green">
<link href="styles/red.css" rel="stylesheet" type="text/css" title="red">
<link href="styles/yellow.css" rel="stylesheet" type="text/css" title="yellow">

jQuery代码：

<script type="text/javascript">
    (function($)
    {
        var $links = $('link[rel*=alternate][title]');
        $('#sw').prepend('<div id="toolbar"><select id="css-selector"></select></div>');
        var options= '<option value="">Select color:</option>';
        $links.each(function(index,value){
        options +='<option value="'+$(this).attr('href')+'">'+$(this).attr('title')+'</option>';
        });
    $links.remove();
    $('#css-selector').append(options)
    .bind('change',function(){
        $('link[rel*=jquery]').remove();
        $('head').append('<link rel="stylesheet jquery" href="'+$(this).val()+'" type="text/css" />');
    });
    }
    )(jQuery); 
    </script>

Answer 1

按照以下步骤根据用户cookie创建自定义布局： -

创建一个读取cookie并更改default.css
的函数
function readCookieCSS(){ if($.cookie('styleSheet') === null || $.cookie('styleSheet')==undefined) { /*Do nothing*/ } else{ $('link[href="default.css"]').attr('href',$.cookie('styleSheet')); } }
更改样式表并在cookie中保存css文件名。

function saveCSSinCookie(CSS_FILE_NAME){ if($.cookie('styleSheet') === null || $.cookie('styleSheet')==undefined) { $.cookie("styleSheet", CSS_FILE_NAME, { expires : 365 });//expires after 1 year $('link[href="default.css"]').attr('href',$.cookie('styleSheet')); } else{ $('link[href="'+$.cookie("styleSheet")+'"]').attr('href', CSS_FILE_NAME); $.cookie('styleSheet',CSS_FILE_NAME); } }

这些函数背后的基本思想是，如果你的cookie存在，那么样式表由用户保存，样式表是default.css（在你的情况下可以是上面任何一个样式表）。

因此，您需要在页面加载时调用readCookieCSS（），并在需要更改样式时调用第二个函数。

如果您想了解有关样式表更改和Jquery Cookie的更多信息，请查看这些答案： -

StyleSheet Change
JQuery Cookie

在代码中调用函数： -

在页面加载时添加readCookieCSS（）： -

$(document).ready(function(){ readCookieCSS();});
通过更新当前绑定函数更改样式表时，调用添加saveCSSinCookie（CSS_FILE_NAME）： -

.bind('change',function(){ saveCSSinCookie($(this).val()); });

更新了Javascript，因为我在javascript数组中存储了不同的css值和标题$links代码： -

function readCookieCSS() {
    if ($.cookie('styleSheet') === null || $.cookie('styleSheet') == undefined) { /*Do nothing*/
    } else {
        $('link[href="default.css"]').attr('href', $.cookie('styleSheet'));
    }
}
function saveCSSinCookie(CSS_FILE_NAME) {
    if ($.cookie('styleSheet') === null || $.cookie('styleSheet') == undefined) {
        $.cookie("styleSheet", CSS_FILE_NAME, { expires : 365 });//expires after 1 year
        $('link[href="default.css"]').attr('href', $.cookie('styleSheet'));
    } else {
        $('link[href="' + $.cookie("styleSheet") + '"]').attr('href', CSS_FILE_NAME);
        $.cookie('styleSheet', CSS_FILE_NAME);
    }
}
$(document).ready(function()
{
    readCookieCSS();/*reading cookie on page load*/
    var $links = [{'style':'style/black.css','title':'black'}, {'style':'style/blue.css','title':'blue'}, {'style':'style/green.css','title':'green'}, {'style':'style/red.css','title':'red'},{'style':'style/yellow.css','title':'yellow'}];
    $('#sw').append('<div id="toolbar"><select id="css-selector"></select></div>');
    var options= '<option value="style/default.css">Select color:</option>';
    $links.map(function(value,index){
    options +='<option value="'+value.style+'">'+value.title+'</option>';
    });
    $('#css-selector').append(options)
    .bind('change',function(){
     saveCSSinCookie($(this).val());
});
}
);

首次使用用户的默认样式表，而不是相应地更改样式表更新了CSS：

<link href="default.css" rel="stylesheet" type="text/css" title="black">

<强> Working Example

切换样式表并记住使用jquery.cookie.js选择的样式表

1 个答案: