Библиотека 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, тем более что сделать это крайне просто, всего одна строка кода:

$(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 вы можете узнать из наших уроков или курса. Удачи!

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