CSS 26    CSS3 10    HTML 2    JavaScript 43    Wordpress 3    Блог 10    Инструменты 1    Не советую 1    Полезные ресурсы 4    Счетчики 1    Шпаргалки 6    Зарегистрироваться 294   Войти

Меню

Добро пожаловать, Гость! Вы можете Войти или Зарегистрироваться.

24

Сворачиваемые блоки jQuery

Jemand 35268 ,
JavaScript

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


* {
	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(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;
	}

2 Подключение jQuery
Для работы блоков нужна библиотека jQuery, скачать её можно по этой ссылке, а подключить нижеследующим кодом, который нужно разместить перед JS-скриптом.

<script type="text/javascript" src="jquery-1.4.1.min.js"></script>

3. JavaScript
Данный код добавляем перед закрывающим тегом </head>.

<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>

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

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

5. HTML

<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>

UPD 18.08.2011:
Чтобы блоки изначально были свёрнуты, нужно:
1. Найти

<div class="post">

Заменить на

<div class="post inactive">

2. Найти

<div class="entry">

Заменить на

<div class="entry" style="display:none;">

Благодарю за код пользователя с ником kiforov!

Рекламная пауза

» 24 комментария

  1. Отличный скрипт, все считайте я ваш завсегдатай)

  2. А как сделать чтобы при открытии страницы с блоками,эти самые блоки были закрыты? т.е. их исходный вид скрытым

  3. Тот же вопрос: “А как сделать чтобы при открытии страницы с блоками,эти самые блоки были закрыты? т.е. их исходный вид скрытым” ???

  4. Это Вам спасибо!
    внедрил на своЁм блоге: _kiforov.ru/blog/2-kak-nazvat-sait

    1. вместо

    <div class="post">

    пишем

    <div class="post inactive">

    2. вместо

    <div class="entry">

    пишем

    <div class="entry" style="display:none;">

    и блоки по умолчанию будут закрыты.

  5. Всем привет. Хороший у вас урок) Только я хотел бы сделать свой дизайн и не как не получается( Помогите сделать вот такой вот дизайн на блок http://s017.radikal.ru/i441/1110/2e/7e0f83afd3c9.jpg

  6. Я в Яве не силен…. У меня получилось сделать свою кнопку но все остальное поставить не получается

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

  8. к сожалению не очень удобен тот скрипт. Если допустим у меня 500 таких блоков, то для каждого присваивать порядковый номер.. Данный пример гораздо легче, и универсальней. Поэтому может быть тут можно дописать функцию закрытия текущего открытого блока? По типу:

    // Process the click - expand the selected content and collapse the others //
    function processClick(div) {
      var catlength = array.length;
      for(i = 0; i < catlength; i++) {
        var section = array[i];
        var head = document.getElementById(section + '-header');
        var cont = section + '-content';
        var contdiv = document.getElementById(cont);
        clearInterval(contdiv.timer);
        if(head == div && contdiv.style.display == 'none') {
          contdiv.style.height = '0px';
          contdiv.style.display = 'block';
          initSlide(cont,1);
        } else if(contdiv.style.display == 'block') {
          initSlide(cont,-1);
        }
      }
    }

    Только как его можно адаптировать под этот код?

  9. а размеры блока где задаются?

  10. Я вот одного не могу понять:

    Если делать все как в статье – ничего не работает.
    Если смотреть пример и полностью его дублировать – все работает, но нафига там стиль подключен как файл и дополнительно практически те же стили прописаны в исходном коде?????
    Без стилей в коде но с подключенными стилями – не работает
    Без подключенных стилей но со стилями в коде – не работает
    С теми и теми стилями вместе – работает

    Но не пихать же эту билиберду на сайт себе.
    Можно как то по человечески оформлять раз уж делаете?

    • 1. Я практически уверен, что Вы неправильно указали путь до картинки-переключателя и до jQuery, т.к. я только что скопировал код примера, и у меня всё работает.
      2. В примере я делал так, как удобно мне, а не как Вам. Для Вас есть код в самой статье, и если её прочитать более внимательно, всё будет работать.
      Дарёному скрипту в код не смотрят :)

      • Эврика!
        Наконец-то все получилось, так и знал что нужно коммент черкануть.
        Все как всегда – пол часа не видишь выхода перед глазами, уже казалось бы все потеряно, пишешь в суппорт и моментально находишь решение просто еще раз переделав :)
        ПС: проблема была в чем то другом, просто голова уже пухнет, наверное где то в стилях запутался или подключении одного из скриптов!

        Спасибо!

  11. Здравствуйте. Справа, в верхнем углу каждого блока есть кнопочка (+ и -).. Проблема в том, что у меня всегда стоит “-”. Я понимаю, что это не принципиально, но все же хотелось бы понять причину своей не доработки.
    Спасибо.


Оставить комментарий