Deff,
Здравствуйте, у меня возникла потребность сделать возможность закрытия несколько табличек. Я сделать изменения на тестовой страницы, блоки для который нужно сделать возможность закрытия http://myforum2.4adm.ru/index.php?page=1 Нужно сделать так, что при закрытии таблички они не зависели друг от друга, и чтоб для них можно было установить разное время хранения куки. Куки: Имя: Block1; Срок: 7 дней; Имя: Block2; Срок: 14 дней; Имя: Block3; Срок: 20 дней. Я пытался дублировать java код и изменить имя, но так почему-то не работало... |
Гы - к вечеру...
|
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ru" lang="ru" dir="ltr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
<script type="text/javascript" src="http://myforum2.4adm.ru/storage/myforum2_4adm_ru/images/jQuery.js"></script>
<script type="text/javascript" src="http://myforum2.4adm.ru/storage/myforum2_4adm_ru/images/jquery.cookie.js"></script>
<style type="text/css">
div[id^="CocieBlock"] {
text-align: center;
padding:12px;
margin:0 auto;
}
div[id^="CocieBlock"] *{
margin:0;
padding:0;
}
div[id^="CocieBlock"] .box {
padding:12px;
background-color:#C1C1C1;
}
div[id^="CocieBlock"] .close {
line-height:3px;
width:10px;
height:10px;
padding:5px 4px 4px 5px;
float:right;
margin-right:0px;
cursor:pointer;
}
div[id^="CocieBlock"] section{
font-size:17px;
font-weight:700;
padding:12px;
max-width:360px;
display:none;
}
.box{
width:500px;
font: normal normal 400 12px/18px Verdana;
}
.box section hr{
height:3px;
padding:0;
}
.tn-box-color-1 {
max-width:360px;
text-align: left;
position:relative;
background:#FEE791 url(http://s1.uploads.ru/i/MYmFD.png) 12px 50% no-repeat;
padding:20px 85px 22px 65px!important;
}
.tn-box-color-1 hr{
position:absolute;
width:90%;
margin-top:13px!important;
left:5%;
border:#FDFBFD solid 2px;
}
</style>
<script type="text/JavaScript">
$(document).ready(function (){
var boxN={box1:7,box2:14,box3:20};
for(var key in boxN){
if($.cookie(key)!=null){
var id = key.replace('box','')
$('#CocieBlock'+id).remove();
}
}
$('.close').click(function() {
$(this).parent().slideUp(800, function() {
var Zr1=$(this).parents('div[id^="CocieBlock"]').find('section');
Zr1.slideDown(800,function() {
setTimeout(function() {Zr1.fadeOut(2300)},1500) //.slideUp(2300)",1500)
});
});
var id=$(this).parents('div[id^="CocieBlock"]').attr("id").replace("CocieBlock","");
//alert(boxN['box'+id])
$.cookie('box'+id,'none',{ expires: parseInt(boxN['box'+id]) }); //Временно закомментировал для тестов
});
});
</script>
</head>
<body>
<div id="CocieBlock1" class="container">
<div class="box" id="box1" >
<div class="close">x</div>
При закрытии таблички должно появится уведомление как в примере!>> Но пока не получается сделать((
</div>
<section>
<div class="tn-box tn-box-color-1">
<p>Ваши персональные настройки были успешно сохранены!</p>
<hr>
<div class="tn-progress"></div>
</div>
</section>
</div>
<div id="CocieBlock2" class="container">
<div class="box" id="box2" >
<div class="close">x</div>
При закрытии таблички должно появится уведомление как в примере!>> Но пока не получается сделать((
</div>
<section>
<div class="tn-box tn-box-color-1">
<p>Ваши персональные настройки были успешно сохранены!</p>
<hr>
<div class="tn-progress"></div>
</div>
</section>
</div>
<div id="CocieBlock3" class="container">
<div class="box" id="box3" >
<div class="close">x</div>
При закрытии таблички должно появится уведомление как в примере!>> Но пока не получается сделать((
</div>
<section>
<div class="tn-box tn-box-color-1">
<p>Ваши персональные настройки были успешно сохранены!</p>
<hr>
<div class="tn-progress"></div>
</div>
</section>
</div>
</body>
</html>
Cледущий Вариант только за плюшки! |
| Часовой пояс GMT +3, время: 13:52. |