Запоминание цветового оформления страницы - PullRequest
Новая
       0

Запоминание цветового оформления страницы

1 голос
/ 14 ноября 2011

Используя куки, я хочу, чтобы он запомнил цветовое оформление страницы. (Таким образом, если они установят галерею один цвет, а фон тела - другой цвет, это сохранится при обновлении. Но, похоже, это не работает.

Вот мой код JavaScript: 

$(document).ready(function() {

    if (verifier == 1) {
        $('body').css('background', $.cookie('test_cookie'));
    }

    if (verifier == 2) {
        $('#gallery').css('background', $.cookie('test_cookie'));
    }

    if (verifier == 3) {
        $('body').css('background', $.cookie('test_cookie'));
        $('#gallery').css('background', $.cookie('test_cookie'));
    }

    $('#set_cookie').click(function() {

        var color = $('#set_cookie').val();

        $.cookie('test_cookie', color);
    });

    $('#set_page').click(function() {
        $('body').css('background',  $.cookie('test_cookie'));
        var verifier = 1;
    });

    $('#set_gallery').click(function() {
        $('#gallery').css('background', $.cookie('test_cookie'));
        var verifier = 2;
    });

    $('#set_both').click(function() {
        $('body').css('background', $.cookie('test_cookie'));
        $('#gallery').css('background', $.cookie('test_cookie'));
        var verifier = 3;
    });
});

и мой HTML: 

<body>
        <div id="wrap">
            <div id="header">
                <img src="media/header.png" alt="Community Header" />
            </div>

            <p>Please select a background color for either the page's background, the gallery's background, or both.</p>

            <select id="set_cookie">
                <option value="#1d375a" selected="selected">Default</option>
                <option value="black">Black</option>
                <option value="blue">Blue</option>
                <option value="brown">Brown</option>
                <option value="darkblue">Dark Blue</option>
                <option value="darkgreen">Dark Green</option>
                <option value="darkred">Dark Red</option>
                <option value="fuchsia">Fuchsia</option>
                <option value="green">Green</option>
                <option value="grey">Grey</option>
                <option value="#d3d3d3">Light Grey</option>
                <option value="#32cd32">Lime Green</option>
                <option value="#f8b040">Macaroni</option>
                <option value="#ff7300">Orange</option>
                <option value="pink">Pink</option>
                <option value="purple">Purple</option>
                <option value="red">Red</option>
                <option value="#0fcce0">Turquoise</option>
                <option value="white">White</option>
                <option value="yellow">Yellow</option>
            </select>

            <input type="button" id="set_page" value="Page's Background" /><input type="button" id="set_gallery" value="Gallery's Background" /><input type="button" id="set_both" value="Both" />


            </div>
        </div>
    </body>

</html>

Вот пример jsFiddle: http://jsfiddle.net/hL6Ye/

Ответы [ 2 ]

2 голосов
/ 14 ноября 2011

У вас проблема: 

    if (verifier == 2) {
            $('#gallery').css('background', $.cookie('test_cookie'));
        }

 $('#set_gallery').click(function() {
        $('#gallery').css('background', $.cookie('test_cookie'));
        var verifier = 2;
    });

в вашем коде, вы устанавливаете test_cookie на цвет фона, а вышеприведенную верификатор - на 2.

От вашего кода вы ожидаете, что verfier будет 2 при загрузке страницы.Это не так, переменные javascript не являются постоянными во время сеансов.Нам не нужны были бы куки, если бы он был, Будем ли мы ?.

Ваш подход должен быть двумя разными куки. page_background и gallery_background .Когда страница загрузится, вы должны проверить значения этих файлов cookie и установить соответствующий цвет.Если куки не установлены, пользователь никогда не удосужился их сохранить.

0 голосов
/ 14 ноября 2011

Полное решение здесь: http://zequinha -bsb.int-domains.com / index.html

Я не мог заставить его работать в jsfiddle.net

Вот его паста (может быть, слишком много): 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>

<script type='text/javascript' src='jquery-1.5.1.min.js'></script>
<script type='text/javascript'>

/* http://www.quirksmode.org/js/cookies.html */
function createCookie(name,value,days) {
    if (days) {
        var date = new Date();
        date.setTime(date.getTime()+(days*24*60*60*1000));
        var expires = "; expires="+date.toGMTString();
    }
    else var expires = "";
    document.cookie = name+"="+value+expires+"; path=/";
}

function readCookie(name) {
    var nameEQ = name + "=";
    var ca = document.cookie.split(';');
    for(var i=0;i < ca.length;i++) {
        var c = ca[i];
        while (c.charAt(0)==' ') c = c.substring(1,c.length);
        if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
    }
    return null;
}

function eraseCookie(name) {
    var date = new Date();
    date.setTime(date.getTime()+(-1));
    var expires = "; expires="+date.toGMTString();
    document.cookie = name+"="+""+expires+"; path=/";
}
/************************** quirksmode.org *****/

function setBGColor() {
    alert('Background color set!');
    var theBGColor = $("#setCookie").val();
    $('body').css('background-color',theBGColor);
    createCookie('MYSITEPGBG',theBGColor,365);
}

function setGLColor() {
    alert('Gallery background color set!');
    var theGLColor = $("#setCookie").val();
    $('#gallery').css('background-color',theGLColor);
    createCookie('MYSITEGLBG',theGLColor,365);
}

$(document).ready(function() {
    var bgCookie = readCookie('MYSITEPGBG');
    var glCookie = readCookie('MYSITEGLBG');
    var bgVerifier = true;
    var glVerifier = true;

    if (bgCookie != undefined) {
        bgVerifier = false;
        $('body').css('background-color',bgCookie);
    }
    if (glCookie != undefined) {
        glVerifier = false;
        $('#gallery').css('background-color',glCookie);
    }
    if (bgVerifier || glVerifier) 
        $('#giveChoices').toggle()
    else $('#allowChange').toggle();
});


</head>

<body>
<div id='gallery' style='float:left; width:400px; height:200px; display:block; ' >
    blah blah clah blah blah blah albh
</div>
<div id='giveChoices' style='display:none; ' >
    <p style='clear:both; margin-top:20px; ' >
        Please select a background color for either the page's background, the gallery's background, or both.
    </p>
    <select id="setCookie">
        <option value="#1d375a" selected="selected">Default</option>
        <option value="black">Black</option>
        <option value="blue">Blue</option>
        <option value="brown">Brown</option>
        <option value="darkblue">Dark Blue</option>
        <option value="darkgreen">Dark Green</option>
        <option value="darkred">Dark Red</option>
        <option value="fuchsia">Fuchsia</option>
        <option value="green">Green</option>
        <option value="grey">Grey</option>
        <option value="#d3d3d3">Light Grey</option>
        <option value="#32cd32">Lime Green</option>
        <option value="#f8b040">Macaroni</option>
        <option value="#ff7300">Orange</option>
        <option value="pink">Pink</option>
        <option value="purple">Purple</option>
        <option value="red">Red</option>
        <option value="#0fcce0">Turquoise</option>
        <option value="white">White</option>
        <option value="yellow">Yellow</option>
    </select>
    <input type='button' onclick='setBGColor(); ' value="Page's Background" />
    <input type='button' onclick='setGLColor(); ' value="Gallery's Background" />
    <input type="button" onclick='setBGColor(); setGLColor(); ' value="Both" />
</div>
<div id='allowChange' style='clear:both; float:left; display:none; '>
 <input type='button' onclick="$('#allowChange').fadeOut('slow'); $('#giveChoices').fadeIn('slow'); " value='Change Colors'  />
</div>
</body>
</html>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...