Как создать свой сайт бесплатно? Как сделать сайт своими руками? Как заработать в Интернете? Создание сайтов на заказ.

Главная

Рассылка

Магазин

Видео Курсы

Секрет

Услуги

Сегодня: Добавить в Избранное Написать Автору Обмен валют Оплата сервисов

Как создать эффект гармошки с помощью скриптов jQuery

Автор: Андрей Краснокутский

Дата: 2012-02-09

Простая гармошка на jQuery

Существует много разных плагинов, с помощью которых можно реализовать красивую раскрывающуюся "гармошку" на сайте, когда большая часть текста невидима, скрыта под заголовком. При клике по заголовку, открывается скрытое окно и становится виден весь текст. А "гармошкой" такой эффект называют потому что заголовков много и соответственно скрытых текстовых блоков тоже много (по числу заголовков).

Сегодня мы как раз и разберем один из примеров создания гармошки для сайта с использованием библиотеки 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 Вы можете править на свое усмотрение, изменяя при этом внешний вид гармошки.

Вот собствено говоря и все. Если что-то не понятно, скачайте исходники и посмотрите исходный код работы скрипта.

Посмотреть пример работы скрипта.

Всего Вам доброго.

Читайте так же другие наши материалы.

Эффект приближения и отдаления изображений.

Регистрируемся в налоговой инспекции в качестве ИП. Практическое руководство.

Галерея изображений с плавно меняющимися картинками.

Как начать свое дело по монтажу пластиковых откосов.

Почему большинство людей, не добиваются успеха?

Пошаговый обучающий Видео Курс по созданию сайтов.

Просмотров: 13649

Поделитесь этой информацией со своими друзьями!

Комментарии к этой статье (уроку):

Комментарии добавил(а): Гораций
Дата: 2012-02-09

Класс! Только почему-то открывается не в новом окне заданного размера.

Комментарии добавил(а): Виктор
Дата: 2012-02-10

Андрей, Искреннее спасибо за "гармошку"! Пожалуйста, побольше таких ПРИМЕРОВ - готовых конструкций включайте в свою рассылку. Вопрос: Как сделать такую же систему КОММЕНТАРИЕВ, как на вашем сайте?

Комментарии добавил(а): АндрейК
Дата: 2012-02-10

Виктор, комментарии на моем сайте организованы с использование базы данных и рассказать здесь (в комментариях) об этом просто не возможно

Комментарии добавил(а): Александр
Дата: 2012-02-18

Спасибо Андрей, как всегда всё работает) С уважением Александр

Комментарии добавил(а): Александр
Дата: 2012-02-18

Виктор,HTML+CSS+PHP и коментарии гатовы )

Комментарии добавил(а): Валерий
Дата: 2012-02-24

Андрей, Александр, кто-нибудь, кто ещё это знает, выложите конкретный скрипт или что ещё, что бы вставил себе на сайт и получилась система комментариев. Я просто уверен, что эта тема интересна многим. Если вдруг кто захочет помочь, вот моё мыло: uvk07@mail.ru

Комментарии добавил(а): Фотиния
Дата: 2018-01-30

Спасибо, очень просто!

Добавить Ваш комментарий:

Разработка полного пакета документов по Охране труда под "КЛЮЧ"
с учетом специфики работы вашей организации. СУОТ.
Сопровождение организаций по Охране труда
(очное или дистанционное).

Новости сайта

12.05.2015
Новая услуга! Изготовление графических элементов. Заказать: иллюстрации для книг, коллажи, подарочные и поздравительные открытки, 3D обложки, фантастические и сюрреалистические работы, зарисовки, баннеры и еще много, многое другое, быстро и дешево.

05.08.2014
Новый раздел! Платежные системы Интернета. Все о платежных системах и сервисах.

09.08.2013
Новинка! Обзор и Анализ реальных способов заработка. Как и Сколько можно заработать в Интернете? Цифры. Факты. Комментарии.

28.05.2013
Обновилась Партнерка сайта! Зарабатывайте вместе с нами! "Новые товары и рекламные материалы"

25.05.2013
Видео Курс! "Как создать свой Информационный Бизнес в Интернете" Зарабатывайте: от 30000 ++ рублей.

Почтовая рассылка! Бесплатные электронные книги из серии: "Секреты создания сайтов"

Реклама в Почтовых Рассылках.

Домены

Сервис мгновенной регистрации Доменов

Google Adsense

Навигация

Уроки HTML

Инструменты

Шаблоны сайтов

Украшения

Сайт от А до Я

Заработать в Интернете

Обман в Интернете

ОХРАНА ТРУДА

МОДУЛЬНЫЕ КАРТИНЫ

Почтовая Рассылка

Специальная оценка условий труда (СОУТ) - АРМ

Платежные системы Интернета

УРОКИ ФОТОШОП

Секретный раздел

Видео Курсы

Видео Курс по созданию собственного Информационного Бизнеса в Интернете

Как заработать деньги в Интернете?
Создай свой ИнфоБизнес

Хотите заработать?
2-х Уровневая
Партнерская программа!
Присоединяйтесь.

Последние заметки

Что должна содержать инструкция по охране труда?

Виды инструкций по Охране труда

Статистический отчет Форма № 7-травматизм "Сведения о травматизме на производстве и профессиональных заболеваниях"

Какие отчеты необходимо сдать Специалисту по охране труда за год

Модульная картина: Роскошь красного бархата

Новости сайта

Архив

2016 год:

2015 год:

2014 год:

2013 год:

2012 год:

2011 год:

2010 год:

2009 год:

2008 год:

Сайты друзей

Регистрация доменов

Наши ссылки

Если Вам понравился
наш сайт, установите
Нашу ссылку, и
Получите подарки!!!

QR код сайта www.LuksWeb.ru

Наши Аттестаты

Проверить аттестат

Проверено Z-PAYMENT

Принимаем Z-PAYMENT

www.megastock.ru

HTML | CSS | Статьи | Инструменты | Шаблоны | Книги | Украшения | Сайт | Заработок | Обман
PHP | Услуги | Скрипты | Рассылка | SEO | jQuery | СОУТ | Online | Секрет| Написать Автору

Разрешается полное или частичное копирование материалов сайта с обязательным
указанием ссылки на автора материала и источник - www.LuksWeb.ru

Copyright Андрей Краснокутский © 2008 - 2019