Библиотека jQuery UI. Виджет accordion

Библиотека jQuery UI. Виджет accordion

От автора: приветствую вас, друзья. В этой статье мы с вами продолжим знакомиться с библиотекой jQuery UI. В статье мы узнаем, как установить и настроить виджет accordion (аккордеон), который можно использовать для меню или секций на сайте.

Итак, посмотреть примеры использования и документацию по плагину аккордеон можно в документации библиотеки jQuery UI в разделе Widgets – Accordion. Для базовой работы аккордеона нам потребуется определенная разметка, а именно: некоторый блок, внутри которого идут секции. Каждая секция состоит из заголовка H3 и блока с содержимым секции.

Давайте создадим три секции с произвольным содержанием:

Бесплатный курс «Full-Stack практика»

Изучите курс и создайте веб-приложение с нуля на JavaScript, NodeJS, ExpressJS

Получить курс

Библиотека jQuery UI. Виджет accordion

Пока что ничего особенного. Однако добавим немного магии библиотеки jQuery UI, тем более что сделать это крайне просто, всего одна строка кода:

Здесь мы для блока обертки вызвали метод accordion, тем самым указав, что мы хотим получить одноименный виджет – аккордеон. Вот результат:

Библиотека jQuery UI. Виджет accordion

Буквально за минуту времени мы получили отличное решение в виде аккордеона секций. Клик по закрытой секции развернет ее, скрыв при этом предыдущую открытую секцию:

Библиотека jQuery UI. Виджет accordion

Также в метод accordion плагина мы можем передавать различные параметры, изменяя функционал по умолчанию. Список доступных параметров можно посмотреть в документации. Например, базовый функционал предполагает всегда одну открытую секцию, при этом клик по активной секции в попытке закрыть ее – ни к чему не приведет. Если же мы хотим иметь возможность закрывать активную секцию, для этого достаточно лишь передать параметр collapsible со значением true:

Теперь клик по активной секции свернет ее:

Библиотека jQuery UI. Виджет accordion

Как видим, работать с библиотекой jQuery UI действительно достаточно просто. В следующих статьях мы продолжим знакомиться с ее плагинами. Ну а пока все. Исходники к статье вы можете скачать по ссылке. Больше о jQuery и библиотеке jQuery UI вы можете узнать из наших уроков или курса. Удачи!

Бесплатный курс «Full-Stack практика»

Изучите курс и создайте веб-приложение с нуля на JavaScript, NodeJS, ExpressJS

Получить курс

Хотите узнать, что необходимо для создания сайта?

Посмотрите 3-х минутное видео и у Вас будет четкий пошаговый план по созданию сайта с нуля!

Смотреть видео

Метки:

Похожие статьи:

Комментарии Вконтакте:

Комментарии Facebook:

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

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">

Я не робот.

Spam Protection by WP-SpamFree