Форум

Vitaliy21 · #21 (**permalink**) 20.08.2012, 15:59

Deff,

Здравствуйте, у меня возникла потребность сделать возможность закрытия несколько табличек.

Я сделать изменения на тестовой страницы, блоки для который нужно сделать возможность закрытия http://myforum2.4adm.ru/index.php?page=1

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

Куки:
Имя: Block1; Срок: 7 дней;
Имя: Block2; Срок: 14 дней;
Имя: Block3; Срок: 20 дней.

Я пытался дублировать java код и изменить имя, но так почему-то не работало...

Deff · #22 (**permalink**) 20.08.2012, 16:08

Гы - к вечеру...

Deff · #23 (**permalink**) 20.08.2012, 21:24

<!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ледущий Вариант только за плюшки!

Форум

Справочник

Discord чат

Курсы javascript