Переключатель цветных страниц с jQuery и cookie

Question

Мне нужна помощь, чтобы добавить сюда cookie, я пытаюсь, но не могу, не знаю, как добавить ... любую помощь?

$(document).ready(function(){ 
    $("li.black_c").click( function(){ $
        (".main").removeClass('bg2 , bg3').addClass("bg1");
    });

    $("li.blue_c").click( function(){ $
        (".main").removeClass("bg1 , bg3").addClass("bg2");
    });

    $("li.red_c").click( function(){ $
        (".main").removeClass("bg1 , bg2").addClass("bg3");
    }); 

});

Вот рабочая демоверсия http://jsfiddle.net/jhMfw/ но без cookie

Answer 1

Для очень простого использования я рекомендую вам jQuery cookie плагин и учебник здесь , чтобы узнать, как его использовать.

Демонстрация: http://jsfiddle.net/jhMfw/2/

$(document).ready(function(){

    $("li.black_c").click( function(){ $
        (".main").removeClass('bg2 , bg3').addClass("bg1");
        $.cookie('mycookie','bg1');
    });

    $("li.blue_c").click( function(){ $
        (".main").removeClass("bg1 , bg3").addClass("bg2");
        $.cookie('mycookie','bg2');
    });

    $("li.red_c").click( function(){ $
        (".main").removeClass("bg1 , bg2").addClass("bg3");
        $.cookie('mycookie','bg3');
    }); 

    if ($.cookie('mycookie')) {
        $('.main').addClass($.cookie('mycookie'));
    }

});​

Answer 2

Вы должны использовать jQuery.cookie ()

$.cookie('bckground-color', 'bg1');//set a cookie
$.cookie('bckground-color');//retrieve a cookie

$(document).ready(function(){ 
    var startClass = $.cookie('bckGround');
    $(".main").addClass(startClass);
    $("li.black_c").click( function(){ $
        (".main").removeClass('bg2 , bg3').addClass("bg1");
         $.cookie('bckGround', 'bg1');
    });

    $("li.blue_c").click( function(){ $
        (".main").removeClass("bg1 , bg3").addClass("bg2");
         $.cookie('bckGround', 'bg2');
    });

    $("li.red_c").click( function(){ $
        (".main").removeClass("bg1 , bg2").addClass("bg3");
         $.cookie('bckGround', 'bg3');
    }); 

});​

Answer 3

лучше создать тематический CSS, который вы замените, нажав на кнопку.

css

black.css

.button {
    background-color: black;
}

blue.css

.button {
    background-color: blue;
}

red.css

.button {
    background-color: red;
}

в заголовке вашего html-файла вы добавите тег сценария, подобный этому

<link rel="stylesheet" type="text/css" href="css/black.css" name="branded"/>

, и ваш javascript:

var cookieName = 'current-branding';

function changeBranding(branding) {
    $.cookie(cookieName, branding);
    $('head link[name=branded]').attr('href', 'css/' + branding + '.css');

}

$(document).ready(function(){ 
    if( $.cookie(cookieName)) {
        changeBranding($.cookie(cookieName));
    }

    $("li.black_c").click( function(){ $
       changeBranding('black');
    });

    $("li.blue_c").click( function(){ $
       changeBranding('blue');
    });

    $("li.red_c").click( function(){ $
       changeBranding('red');
    }); 

});