Запись cookies
Совсем недавно потребовалось мне сделать сворачивание блока на сайте и при этом делать запись в cookies для того чтобы пользователь не нажимал по кнопочке свернуть каждый раз после перезагрузки страницы. Это очень удобно когда вы выводите на сайте какой то блок, скажем с заметками пользователя, который можно скрыть и открыть только тогда когда это потребуется.
Давайте рассмотрим реализацию на примере
И так у нас есть блок, назовем его Новости, в нем находятся ссылки на 5 новостей нашего сайта, блок занимает много места и кнопочка для его скрытия упростит дальнейшее использование сайта.
Не забудьте разместить jqueryна страницах сайта
Блок вывода новостей имеет вид
Я оставил span.info_close для того чтобы вы смогли туда вписать что нибудь после закрытия блока, к info_close и будем делать привязку
Теперь давайте разместим следующий скрипт
Обратите внимание, тут мы аяксом изменяем все то что необходимо изменить после нажатия на кнопку, т.е. скрыть блок, а потом открыть его. Так же заносим в куки дату, указываем pach чтобы работало на всех страницах сайта, а так же название куки.
Между делом: Интересно у вас есть домашние питомцы? Собаки или кошки, иногда бывает им нужно оказать помощь, но мы не знаем как и для этого существует ветеринарная помощь на дому.
Давайте рассмотрим реализацию на примере
И так у нас есть блок, назовем его Новости, в нем находятся ссылки на 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 комментариев