От автора: приветствую вас, друзья. В этой статье мы с вами продолжим знакомиться с библиотекой jQuery UI. В статье мы узнаем, как установить и настроить виджет accordion (аккордеон), который можно использовать для меню или секций на сайте.
Итак, посмотреть примеры использования и документацию по плагину аккордеон можно в документации библиотеки jQuery UI в разделе Widgets – Accordion. Для базовой работы аккордеона нам потребуется определенная разметка, а именно: некоторый блок, внутри которого идут секции. Каждая секция состоит из заголовка H3 и блока с содержимым секции.
Давайте создадим три секции с произвольным содержанием:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
<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, тем более что сделать это крайне просто, всего одна строка кода:
|
1 2 3 |
$(function(){ $( "#accordion" ).accordion(); }); |
Здесь мы для блока обертки вызвали метод accordion, тем самым указав, что мы хотим получить одноименный виджет – аккордеон. Вот результат:
Буквально за минуту времени мы получили отличное решение в виде аккордеона секций. Клик по закрытой секции развернет ее, скрыв при этом предыдущую открытую секцию:
Также в метод accordion плагина мы можем передавать различные параметры, изменяя функционал по умолчанию. Список доступных параметров можно посмотреть в документации. Например, базовый функционал предполагает всегда одну открытую секцию, при этом клик по активной секции в попытке закрыть ее – ни к чему не приведет. Если же мы хотим иметь возможность закрывать активную секцию, для этого достаточно лишь передать параметр collapsible со значением true:
|
1 2 3 |
$( "#accordion" ).accordion({ collapsible: true }); |
Теперь клик по активной секции свернет ее:
Как видим, работать с библиотекой jQuery UI действительно достаточно просто. В следующих статьях мы продолжим знакомиться с ее плагинами. Ну а пока все. Исходники к статье вы можете скачать по ссылке. Больше о jQuery и библиотеке jQuery UI вы можете узнать из наших уроков или курса. Удачи!
