Делаем сворачивание блоков jQuery


Делаем сворачивание блоков jQuery

2550
10 из 10
Проголосовало: 1






Неплохой пример сворачивающихся блоков с использованием jQuery. Применений данным блокам можно найти несметное количество. Так же при некотором модифицировании CSS кода, можно сделать разворачивающиеся блоки, экспериментируйте.

Установка

1) Для начало в CSS вставляем:

Code
* {
  margin: 0;
  padding: 0
  }
.post {
  padding: 10px 20px;
  position: relative;
  background: #eee;
  margin-bottom: 20px;
  border: 1px solid #CCCCCC;
  }
.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: 11px;
  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(http://webo4ka.ru/Ucoz/demo/svorachivaemye_bloki_jquerytrigger.gif) no-repeat left bottom;
  display: block;
  font-size: 0;
  }
#content .inactive .title span {
  background-position: left top;
  }
#content .post .entry {
  padding: 10px 0;
  }


2) Далее вставляем JavaScript код. Вставлять перед закрывающим тегом </head>.

Code
<script>
$(document).ready(function() {
  $('.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');
  });
  });
});
</script>


3) !DOCTYPE. Указание !DOCTYPE обязательно, иначе вся конструкция будет работать некорректно.

Это делается в ПУ \ Редактор страниц \ Настройки модуля, и если у вас в строчке Значение тега <!DOCTYPE> пусто, то вставьте:

Code
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">


4) HTML вставляете куда вам надо:

Code
<div id="content">
  <div class="post">
  <div class="title">
  <h3><a href="#" title="">Галактики как песчинки</a></h3>
  <p>Автор: Олдисс Брайан</p>
  </div>
  <div class="entry">
  <p>Начнем. Конечно же, это имеется ввиду не начало в буквальном смысле, с первого эпизода, когда над миром сгустились тучи национализма и разразились ураганом войны. Над забытыми континентами - Азией, Америкой, Африкой - неслись всесокрушающие снаряды. В те дни осажденные люди не вполне понимали природу сражения, в которое они оказались втянуты. Осознание политической ситуации у этих простых черных, белых, серых людей могло быть изменено достаточно быстро с незначительными затратами сил. Но в основе этих побуждений лежали факторы, которые вряд ли достаточно понимались в правительственных особняках Пекина, Лондона, Каира или Вашингтона - факторы, источник которых крылся в длительном и диком прошлом расы; факторы инстинктивные и демонстрирующие полную бесполезность инстинктов, факторы страха, вожделения и пробуждающейся совести; факторы неотделимые от юности вида, маячащие позади всех...</p>
  </div>
  </div>
  <div class="post">
  <div class="title">
  <h3><a href="#" title="">Схизматрица</a></h3>
  <p>Автор: Стерлинг Борис</p>
  </div>
  <div class="entry">
  <p>Народный Орбитальный Дзайбацу Моря Спокойствия Линдсея отправили в ссылку. Самым дешевым способом. Двое суток провел он слепым и глухим, накачанный наркотиками и залитый густой противоперегрузочной массой. Автоматический катер, запущенный с грузовой направляющей, кибернетически точно лег на полярную орбиту вокруг другой орбитальной станции. Таких миров, названных по кратерам и морям, из которых брали сырье, вращалось вокруг Луны ровно десять. То были первые миры, вчистую порвавшие с истощенной Землей. Целый век их лунный союз был основой цивилизации, и коммерческих рейсов внутри этой Цепи миров было множество. Но миновали дни славы; прогресс глубокого космоса отодвинул Цепь на задворки. Цепь разорвалась, тихий застой обернулся настороженной замкнутостью и техническим регрессом. Орбитальные миры деградировали, и пуще всех - тот, что был определен местом ссылки Линдсея. Прибытие...</p>
  </div>
  </div>
  <div class="post">
  <div class="title">
  <h3><a href="#" title="">Заповедник гоблинов</a></h3>
  <p>Автор: Саймак Клиффорд</p>
  </div>
  <div class="entry">
  <p>Инспектор Дрейтон сидел за письменным столом, как несокрушимая скала, и терпеливо ждал. Он был костляв, а его лицо словно вырубили тупым топором из узловатого чурбака. Глаза его, больше всего напоминавшие кремневые наконечники стрел, время от времени, казалось, тускло поблескивали - он был сердит и расстроен. Но Питер Максвелл знал, что такой человек никогда не допустит, чтобы его раздражение вырвалось наружу. Он будет делать свое дело с бульдожьим упорством и хваткой, игнорируя все окружающее. Именно такой ситуации Максвелл и надеялся избежать. Но теперь ему стало ясно, что он тешил себя пустыми иллюзиями. Конечно, он с самого начала понимал, что на Земле не могли не встревожиться, когда полтора месяца назад он не появился на станции своего назначения, и, естественно, у него не было никаких шансов вернуться домой тихо и незаметно. И вот сейчас он сидит напротив инспектора, и ему во что бы то ни стало нужно...</p>
  </div>
  </div>
</div>


Так же вы можете посмотреть демо: Демо
Автор публикации: Загрузка
Загрузка
Вовчик, это его n материал
  • Оставить первым комментарий:
Добавлять комментарии могут только зарегистрированные пользователи.
Регистрация | Вход
Меню сайта
Категории
Для помощи создания сайта uCoz 24
Скрипты и модификации для Ucoz 2101
Шаблоны форумов Ucoz 28
Шаблоны сайтов Ucoz 429
Авторство Webo4ki 309
php скрипты для ucoz 57
Графика для uCoz 40
Мини-чат
Последние комментарии
как поставить свою ссылку и логотип
  • Сатурн-1 написал:
  • Похвально.
  • Winston888 написал:
  • Я не говорил что делаю только скрипты. Я делаю шаблоны, скрипты, адаптации с разных движков под ucoz и на оборот + я ещё и сам рисую. В данный момент занимаюсь дизайном для webo4ka сам рисую сам верстаю.
  • Сатурн-1 написал:
  • Заметь, мы делаем почти одну и ту же работу.
    Ты - скрипты, я -шаблон. И каждый делает это бесплатно, НО
    ты делаешь скрипты без шаблона, я делаю шаблон без скриптов (не считая основных).
    Я тоже могу сказать что твои скрипты не идеальны, но не буду т.к. даже не знаю какие из всех существующих твои.
    Поэтому ты не сравнивай скрипты и шаблоны да еще и на Ucoz'e, мы же не на хакатоне каком нибудь.
  • Winston888 написал:
  • Если бы я не добавлял бесплатные адаптации или скрипты бесплатно я бы наверное не стал бы комментировать ваш материал.
    Последние темы
    Опрос
    204
    А
    Р
    Что произойдёт: $("#...
    Статистика
    Анализ интернет сайта
    0
    онлайн
    0
    наших
    0
    чужих
    Онлайн всего: 2
    Гостей: 2
    Пользователей: 0
    0
    Сегодня были
    Топ пользователей: