Как создать эффект гармошки с помощью скриптов jQuery
Автор: Андрей Краснокутский
Дата: 2012-02-09 Простая гармошка на jQuery
Существует много разных плагинов, с помощью которых можно реализовать красивую раскрывающуюся "гармошку" на сайте, когда большая часть текста невидима, скрыта под заголовком. При клике по заголовку, открывается скрытое окно и становится виден весь текст. А "гармошкой" такой эффект называют потому что заголовков много и соответственно скрытых текстовых блоков тоже много (по числу заголовков).
Сегодня мы как раз и разберем один из примеров создания гармошки для сайта с использованием библиотеки JQuery. На скриншоте ниже, Вы как раз и видите пример такой "гармошки".

В данный момент (на скриншоте) раскрыт второй блок, всего блоков четыре, но подобных блоков можно сделать сколько угодно. Особенно подобная "гармошка" актуальна на сайте когда информации много, а места мало. Довольно часто подобным образом реализуют ответы на вопросы: вопросы видны, а ответы скрыты и открываются при клике по ссылке (заголовку).
Посмотреть живой пример работы скрипта можно здесь.
Понадобится и сам плагин. Поэтому нужно дополнительно скачать исходник.
Теперь давайте разбираться с подключением и практической реализацией "гармошки".
Прописываем код Листинга 1 между тегами <head> и </head>:
Листинг 1.
<script src="js/jquery-1.6.2.min.js" type="text/javascript"></script>
<script src="js/js.js" type="text/javascript"></script>
<link rel="stylesheet" href="css.css" type="text/css" media="screen" /> |
Таким образом мы подключаем библиотеку jQuery, плагин JS и таблицу стилей к своей web-странице. Не забудьте правильно прописать путь до этих файлов. По умолчанию в Листинге 1 считается, что они лежат в корневой папке сайта.
Теперь редактируем HTML-код web-страницы. Между тегами: <body> и </body> создаем контейнер: <div id="container"> </div> (в том месте где нужно вывести гармошку). Внутри этого контейнера и будем прописывать код каждого из раскрывающихся блоков.
На скриншоте выше Вы видите четыре раскрывающихся блока, на самом деле таких блоков может быть сколько угодно. Каждый из блоков прописывается отдельным участком кода, который приведен в Листинге 2.
Листинг 2.
<h2 class="trigger"><a href="#">Как заработать в Интернете</a></h2>
<div class="toggle_container">
<div class="block">
<h3><a href="http://www.luksweb.ru/view_cat.php?cat=10" target="_blank">Честные способы заработка в Интернете.</a></h3>
<p>Название этого Раздела сайта говорит само за себя. Здесь публикуются различные материалы по заработку в Интернете. Существует масса способов заработать в Интернете честным путем. Здесь Вы можете ознакомиться с различными способами заработка, как с использованием сайта, так и без сайта. Хотя если у Вас есть собственный сайт, вариантов для заработка в Интернете у Вас гораздо больше. </p>
<p><a href="http://www.luksweb.ru/view_cat.php?cat=10" target="_blank">Перейти в раздел >>></a></p>
</div>
</div> |
В Листинге 2 приведен код второго раскрывающегося блока скриншота: Как заработать в интернете.
Соответственно сколько таких (аналогичных) блоков Вы хотите сделать, столько раз и нужно повторить внутри контейнера <div id="container"> </div> Листинги 2. Естественно со своими значениями.
Внешний вид каждого из блоков определяется в каскадной таблице стилей (файл css.css). В Листинге 3 приведен код этого файла:
Листинг 3.
*{
margin:0px;
padding:0px;
}
#container {
margin: 80px auto;
width: 500px;
text-align:left;
}
h2.trigger {
background: url("img/h2_trigger.gif") no-repeat;
width: 500px;
height: 46px;
padding: 0 0 0 50px;
margin: 0 0 5px 0;
font-weight: normal;
font-size: 1.6em;
float: left;
line-height: 46px;
}
h2.trigger a {
color: #000;
text-decoration: none;
display: block;
}
h2.trigger a:hover {
color: #FF0000;
}
h2.active {
background-position: left bottom;
}
.toggle_container {
background: url("img/toggle_b.gif") repeat-y;
margin: 0 0 5px;
padding: 0;
border-top: 1px solid #d6d6d6;
font-size: 1em;
width: 500px;
clear: both;
overflow: hidden;
}
.block {
padding: 20px;
background: url("img/toggle_c.gif") no-repeat left bottom;
}
|
Файл css.css Вы можете править на свое усмотрение, изменяя при этом внешний вид гармошки.
Вот собствено говоря и все. Если что-то не понятно, скачайте исходники и посмотрите исходный код работы скрипта.
Посмотреть пример работы скрипта.
Всего Вам доброго.
Читайте так же другие наши материалы.
Эффект приближения и отдаления изображений.
Регистрируемся в налоговой инспекции в качестве ИП. Практическое руководство.
Галерея изображений с плавно меняющимися картинками.
Как начать свое дело по монтажу пластиковых откосов.
Почему большинство людей, не добиваются успеха?
Пошаговый обучающий Видео Курс по созданию сайтов.
Просмотров: 14684
Класс! Только почему-то открывается не в новом окне заданного размера.
Андрей,
Искреннее спасибо за "гармошку"!
Пожалуйста, побольше таких ПРИМЕРОВ - готовых конструкций включайте в свою рассылку.
Вопрос: Как сделать такую же систему КОММЕНТАРИЕВ, как на вашем сайте?
Виктор, комментарии на моем сайте организованы с использование базы данных и рассказать здесь (в комментариях) об этом просто не возможно
Спасибо Андрей, как всегда всё работает)
С уважением Александр
Виктор,HTML+CSS+PHP и коментарии гатовы )
Андрей, Александр, кто-нибудь, кто ещё это знает, выложите конкретный скрипт или что ещё, что бы вставил себе на сайт и получилась система комментариев. Я просто уверен, что эта тема интересна многим. Если вдруг кто захочет помочь, вот моё мыло: uvk07@mail.ru
|