Форма входа

mvcreative

Старая форма входа

  • Страница 1 из 1
  • 1
Модератор форума: BSide  
Форум MVCreative » сделаем креативный uCoz » Общение и архив » Архив старых тем » jQuery: Сворачиваемые блоки
jQuery: Сворачиваемые блоки
cechДата: Понедельник, 19.07.2010, 09:03 | Сообщение # 1
Генерал печатного дела
Группа: Администраторы
Пользователь №: 1
Сообщений: 1706
Награды: 59
Репутация: 108
Статус: оффлайн
Небольшой пример демонстрирующий эффект сворачивания однотипных блоков (например постов в блоге или виджетов в сайдбаре) с помощью jQuery.





HTML


Code
<div class="post">
      <div class="title">
          <h3><a href="" title="">Заголовок</a></h3>
           

Автор, 12.02.2010</p>
      </div>
      <div class="entry">
          <!-- Контент -->
      </div>
</div>
     
<div class="post">
      <div class="title">
          <h3><a href="" title="">Заголовок</a></h3>
           

Автор, 12.02.2010</p>
      </div>
      <div class="entry">
          <!-- Контент -->
      </div>
</div>
     



В данном примере присутствуют несколько постов. Скрываться будет их контентная часть.


CSS


Code
.post {
      padding:10px 20px;
      position:relative;
      background:#eee;
      margin-bottom:20px
}
.inactive {
      color:#bbb
}
.post .title {
      position:relative;
      height:1%
}
.post .title h3 {
      font-size:1.4em
}
.post .title h3 a {
      text-decoration:none;
      color:#000
}
.inactive .title h3 a {
      color:#bbb
}
.post .title p {
      font-size:0.7em;
      font-style:italic;
      font-weight:bold;
      margin:0
}
.post .title span {
      position:absolute;
      right:0;
      top:30%;
      cursor:pointer;
      width:14px;
      height:14px;
      background:url(/trigger.gif) no-repeat left bottom;
      display:block;
      font-size:0
}
#content .inactive .title span {
      background-position:left top
}
#content .post .entry {
      padding:10px 0
}



"Span" будет служить переключателем для сворачивания и разворачивания блоков и будет добавлен с помощью javascript. Поэтому пользователи с отключенным javascript не увидят ничего не делающий элемент.


Javascript


Code
$('.title').append('<span></span>');
$('.post span').each(function() {
     var trigger = $(this), state = false, el = trigger.parent().next('.entry');
     trigger.click(function(){
        state = !state;
        el.slideToggle();
        trigger.parent().parent().toggleClass('inactive');
     });
});



 
вверх
Форум MVCreative » сделаем креативный uCoz » Общение и архив » Архив старых тем » jQuery: Сворачиваемые блоки
  • Страница 1 из 1
  • 1
Поиск: