Запись cookies

Совсем недавно потребовалось мне сделать сворачивание блока на сайте и при этом делать запись в cookies для того чтобы пользователь не нажимал по кнопочке свернуть каждый раз после перезагрузки страницы. Это очень удобно когда вы выводите на сайте какой то блок, скажем с заметками пользователя, который можно скрыть и открыть только тогда когда это потребуется.

Давайте рассмотрим реализацию на примере

И так у нас есть блок, назовем его Новости, в нем находятся ссылки на 5 новостей нашего сайта, блок занимает много места и кнопочка для его скрытия упростит дальнейшее использование сайта.

Не забудьте разместить jqueryна страницах сайта
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>


Блок вывода новостей имеет вид
<div class="block_news">
        <span id="close">скрыть / открыть</span>
        <span class="info_close"></span>
            <ul>
                <li><a href="hhtp://scriptland.com.ua/">Новость первая</a></li>
                <li><a href="hhtp://scriptland.com.ua/">Новость вторая</a></li>
                <li><a href="hhtp://scriptland.com.ua/">Новость третья</a></li>
                <li><a href="hhtp://scriptland.com.ua/">Новость четвертая</a></li>
                <li><a href="hhtp://scriptland.com.ua/">Новость пятая</a></li>
            </ul>
        </div>


Я оставил span.info_close для того чтобы вы смогли туда вписать что нибудь после закрытия блока, к info_close и будем делать привязку
<span class="info_close"></span>


Теперь давайте разместим следующий скрипт
<script type="text/javascript">
(cookie = {
    set: function (a, b, c) {
        if (a) {
            var date = new Date();
            date.setTime(date.getTime() + (c * 24 * 60 * 60 * 1000));
            document.cookie = a + '="' + escape(b) + '"; expires="' + (date.toGMTString()) + '"; path="/"';
        }
        else return null;
    },
    get: function (a) {
        var name = a + "=";
        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(name) == 0) return c.substring(name.length, c.length);
        }
        return null;
    }
});
$('#close').live('click', function(){
    $.ajax({
        success: function(data) {
    if(cookie.get('info_close') == null) {
        $('.block_news ul').hide(600, function() {
        });
    $('span#close').attr('id','open');
    cookie.set('info_close', 1, 365);
    } else return null;
    }});
    });
$('#open').live('click', function(){
    $.ajax({
        success: function(data) {
    if(cookie.get('info_close') != null) {
        $('.block_news ul').show(600, function() {
        });
        $('span#open').attr('id','close');
    cookie.set('info_close', '', new Date(0));
    } else return null;
    }});
    });
   $(document).ready(function () {
     if(cookie.get('info_close') != null) {
        $('.block_news ul').hide(600, function() {;
        });
        $('span#close').attr('id','open');
        }
   });
</script>


Обратите внимание, тут мы аяксом изменяем все то что необходимо изменить после нажатия на кнопку, т.е. скрыть блок, а потом открыть его. Так же заносим в куки дату, указываем pach чтобы работало на всех страницах сайта, а так же название куки.
Между делом: Интересно у вас есть домашние питомцы? Собаки или кошки, иногда бывает им нужно оказать помощь, но мы не знаем как и для этого существует ветеринарная помощь на дому.

0 комментариев

Только зарегистрированные и авторизованные пользователи могут оставлять комментарии.