Сворачивание блоков с запоминанием
Блок сворачивается и разворачивается с помощью скрипта. Ну, а чтобы это выглядело анимировано, используется JQuery. В заголовке уже написано, что это сворачивание блоков с запоминанием. Cookies в помощь. Сейчас редко у кого они отключены. Блогодаря Cookies браузер запомнит специальное значение, а при обновлении страницы, повторном заходе, скрипт обработает данные Cookies и скроет блок, если это было сделано пользователем ранее. Использование скрипта позволит сэкономить место на сайте, это также будет удобно пользователю. Можно заключить рекламу в такой блок, а можно сделать блок с каким-либо напоминанием.
ПримерСвернуть
Нажмите на заголовок блокаНажав на так называемую «шапку» блока, все его содержимое свернется. Обновите браузер, и блок останется свернутым. Если этого не произошло, значит в вашем браузере отключены Cookies.
Подключение JQuery (между <head> и </head>)
<script type="text/javascript" src="http://yraaa.ru/test/53/jquery.js"></script>
Скрипт работы с Cookies (между <head> и </head>)
<script type="text/javascript" src="http://yraaa.ru/images/cookies.js"></script>
Код HTML
<div class="sl1"> <div class="sl2" id="block1"><div class="sl3">Свернуть</div>Нажмите на заголовок блока</div> <div class="sl4">Нажав на так называемую «шапку» блока, все его содержимое свернется. Обновите браузер, и блок останется свернутым. Если этого не произошло, значит в вашем браузере отключены Cookies.</div> </div>
Код CSS
<style type="text/css">
.sl1 {border:1px solid #D4D4D4}
.sl2 {padding:12px 20px 12px 20px;background:#EAEAEA;border-top:1px solid #FFFFFF;
border-bottom:1px solid #D4D4D4;color:#414141;font-weight:bold;cursor:pointer}
.sl3 {float:right;color:#18A0F7}
.sl4 {padding:20px;background:#FFFFFF;color:#656565}
</style>Код Javascript
<script type="text/javascript">
$('#block1').click(function() {
if($(this).children('.sl3').html()=='Свернуть') {
setCookie('block1', '1', 10, '/');$(this).children('.sl3').html('Развернуть');
$(this).parent().children('.sl4').slideToggle(200)} else {
setCookie('block1', '0', 10, '/');$(this).children('.sl3').html('Свернуть');
$(this).parent().children('.sl4').slideToggle(200)}
})
block1 = getCookie('block1')
if(block1 == '1') {$('#block1').parent().children('.sl4').hide();
$('#block1').children('.sl3').html('Развернуть')}
</script>
Создать сайт в uKit
Нужен классный сайт для бизнеса?
Воспользуйтесь сервисом uKit. Никакого кода!
Воспользуйтесь сервисом uKit. Никакого кода!
Комментарии (20)
0
0
0
0
0
0
0
0
0
0
0
0
0
0
0
0
0
0
0
0
Чтобы оставить комментарий или отзыв под этой публикацией, войдите или зарегистрируйтесь.
Рейтинг лучших сервисов для самостоятельного создания сайта.
Легко! Если пользоваться нашими советами.
