Авторизация



Напомнить пароль
Регистрация


РазработкаjQuery аккордеоны и экспандеры. Часть 1

jQuery аккордеон

В заметке представлены раскрывающиеся/закрывающиеся блоки с различным контентом. Эти блоки можно использовать в навигации, в различных слайдерах или просто для скрытия определенных элементов на странице до нажатия на ссылку. Можно встретить различные названия подобных плагинов, но чаще всего их называют аккордеоны (из-за сходства эффекта) или экспандеры. 

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

1. JavaScript плагин аккордеон «TinyAccordion»

Аккордеон

Отображение информации с эффектом аккордеона. Поддержка нескольких уровней.

2. jQuery плагин «Easy Expand»

jQuery плагин Easy Expand

Плагин для реализации раскрывающейся области. Контент появляется при нажатии на ссылку.

3. Красивый слайдер-аккордеон на jQuery

jQuery слайдер

4. jQuery плагин аккордеон «Jaws»

jQuery плагин аккордеон

Плагин для реализации блока последних новостей с эффектом аккордеона и постраничным разбиением.

5. CSS jQuery аккордеон

jQuery аккордеон

Аккуратный аккордеон с использованием jQuery.

6. jQuery плагин «liteAccordion»

jQuery слайдер аккордеон

Создание слайдеров изображений в стиле горизонтального аккордеона. Три различных варианта плагина можете посмотреть на демонстрационной странице.

7. jQuery плагин «Fade and slide»

jQuery плагин для скрывания контента

Легкий плагин для отображения/скрывания информации в блоке.

8. jQuery слайдер-аккордеон

jQuery слайдер-аккордеон

Аккуратный jQuery слайдер в стиле аккордеон. Есть возможность установить автоматическую смену слайдов и время показа для каждого слайда.

9. «Toggle Effect»

Эффект аккордеон

Плагин работает в двух вариантах: при нажатии либо наведении курсора мыши на ссылку, появляется скрытый контент.

10. Вертикальный аккордеон на jQuery

Аккордеон на jQuery

Блок разъезжается при нажатии на него мышкой. При этом блоки можно прокручивать либо с помощью колеса мыши, либо при помощи стрелок вверх/вниз. На странице с демонстрацией представлено 5 вариантов исполнения.

11. jQuery аккордеон

jQuery аккордеон

12. Вертикальный аккордеон на jQuery

Вертикальный аккордеон на jQuery

Раскрывающаяся область.

13. Горизонтальный и вертикальный JavaScript аккордеон «Aga»

jQuery аккордеон

Плагин для отображения контента и изображений с эффектом аккордеона.

14. Сетка-аккордеон

Сетка-аккордеон

Вы, наверное, встречались с реализацией меню в виде аккордеона. Когда меню подобно аккордеону растягивается либо вертикально, либо горизонтально. Я предлагаю вам посмотреть расширенную реализацию этой техники, которая представляет собой сетку. При нажатии на какую-нибудь клетку, её границы разъезжаются по горизонтали и вертикали для отображения полного содержимого клетки

15. Динамическая реализация страницы FAQ (вопрос-ответ)

Динамическая реализация страницы FAQ (вопрос-ответ)

На странице отображается список вопросов. У каждого вопроса имеется кнопка «ответ», по нажатию на которую выплывает ответ на интересующий вопрос. Внешний вид можно отредактировать в файле style.css

16. Вертикальный jQuery аккордеон «Flexible Slide-to-top Accordion»

jQuery аккордеон

Область с контентом раскрывается при нажатии на ссылку. Плагин выполнен в двух вариантах: в одном случае раскрыть можно все блоки контента одновременно, во втором — при отркытии какого-либо одного блога сварачивается тот, что был развернут перед этим.

17. jQuery плагин «Facets»

jQuery плагин

Плагин в стиле аккордеон для реализации необычной навигации на сайте. Для того чтобы посмотреть плагин в действии в различном исполнении, пройдитесь по ссылкам Demo1 — Demo4 на демонстрационной странице.

18. jQuery вкладки-аккордеон

Меню jQuery аккордеон

Нет возможности поставить прямую ссылку, поэтому ссылка «Скачать» ведет на страницу, с которой вы сможете загрузить скрипт.

19. JQuery аккордеон 

Меню jQuery аккордеон

Подготовлено по материалам: efimov.ws

  • 0
  • Автор: efimov
  • Дата: 19 ноября 2011, 23:13
  • В избранное:


Комментарии (1)

rss свернуть / развернуть
у нынешний час очень распространенным стал отдых на пляже моря также берегу океана с субарендой яхт на парочку дней либо недель. специально для романтического путешествия, совместного рекреации либо большой компании — станет бесподобным вариант памятно скоротать время. Мы презентует для своих пользователей аренду яхты только на благоприятных договоре ото таковой бюро. Вы можете исполнить аренду судна, топселя различной стоимости, в положении ото требований выставке, технических сбыточности, габаритов, быстроты и так.д. к тому же использовать яхту у течении суток, недели, месяца определенно на Средиземном, Карибском, Балтийском, Ионическом, Эгейском также других водоемах. На морском транспорте клиент без трудностей имеет возможность отправиться на экзотические участок в погоне за памятными ощущениями. из чартером ото нашей компании круиз на яхте по средиземному морю стоимость http://european-yachts.com, вы обретет: консультирование знатока, содействие также назначение при аренде водного транспорта, комбинации команды для путешествия при требования, оформление всех официальности, согласование плана из шкипером, тех осмотр транспорта и минимальную оплату за аренду в любое час перемены сезонов.
свернуть ветку
Только зарегистрированные и авторизованные пользователи могут оставлять комментарии.