Говорят, что создание сайта - очень длительный и трудоемкий процесс. Мы скажем - НЕТ! Ведь с новыми технологиями, такими как HTML5, CSS3, PHP и MySql можно быстро и легко научиться создавать сайты любой сложности.
Два сумасшедших веб-мастера покажут где что лежит и как этим пользоваться.
Авторизация
Новый
Забыл
Пожалуйста, заполните поля выше. Это нужно сделать обязательно, иначе ничего не получится.
JavaScript и Jquery /

Сворачивание блоков на Jquery

  • Суббота, 27 ноября 2011, 00:36 |
  • Автор: fiamma |
  • Просмотров: 6282 |
  • Комментарии: 1 |
  • В закладки:
Здравствуйте. Сегодня мы попробуем с помощь Jquery реализовать сворачиваемые блоки. В качестве блоков мы будем использовать div-ы (Которые в принципе и являются блоками). Для этого нам понадобится кружка горячего чая и прямые руки.. Приступим?

Для начала нам необходимо создать заготовку этих самых сворачиваемых блоков. Вы можете написать код самостоятельно, а можете использовать мой:
<div class="post">
    <div class="title">
        <h3><a href="" title="">Заголовок</a></h3>
        <p>Автор, 12.02.2010</p>
    </div>
    <div class="entry">
        <!-- Контент -->
    </div>
</div>

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


Добавим немного стилей к нашему коду, чтобы конечная веб-страница была немножечко изящнее.
.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
}

Вот наверное и все. Теперь мы приступим к самому интересному - реализации сворачиваемых блоков. Сначала мы должны обнулить значения класса title. Для этого, как вы знаете, необходимо воспользоваться функцией ".append". После этого заносим в переменные необходимые значения и создаем событие, которые будет выполняться при клике мышкой на блок с классом ".entry". Меняем значения блоков и все... Наш скрипт готов. Теперь вам лишь остается придумать где его можно использовать. Одни это сделают на главной странице блока, другие - в админке своего сайта.
$('.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');
   });
});
До новых уроков! ;)

Не менее интересным будет информация о закруглении углов изображений с помощью jQuery
Добавить комментарий