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

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

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

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

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

<div class="container content">
 <div id="accordion">
  <h3>Секция 1</h3>
  <div>
 <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Explicabo, ea!</p>
  </div>
  <h3>Секция 2</h3>
  <div>
 <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Explicabo, ea!</p>
  </div>
  <h3>Секция 3</h3>
  <div>
 <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Explicabo, ea!</p>
 <ul>
 <li>List item one</li>
 <li>List item two</li>
 <li>List item three</li>
 </ul>
  </div>
 </div>
</div>

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

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

Современные технологии веб-разработки

AngularJS, Webpack, NodeJS, ReactJS, TypeScript, Gulp, Git, Github...
Узнайте все о современных технологиях в веб-разработке

Узнать подробнее
$(function(){
 $( "#accordion" ).accordion();
});

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

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

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

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

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

$( "#accordion" ).accordion({
 collapsible: true
});

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

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

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

Самые свежие новости IT и веб-разработки на нашем Telegram-канале

JavaScript&jQuery с нуля до профи

Пройдите пошаговый видеокурс по JavaScript&jQuery

Научиться

Метки:

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

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

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

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

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

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

Я не робот.

Spam Protection by WP-SpamFree