Библиотека jQuery UI: эффекты

От автора: Довольно часто на страницах сайта возникает потребность в так называемом спойлере. Спойлер — это блок, который можно скрывать и вновь показывать. Довольно часто Вы можете увидеть его в новостных блоках, где изначально показан краткий текст новости, а полный текст скрыт и показывается по желанию читателя. Подобный спойлер мы с Вами уже делали в уроке "Как сделать FAQ на сайте с использованием PHP-MySQL-jQuery".

Эффект появления/скрытия спойлера хоть и привлекателен, но уже довольно обыден.

Этот момент можно исправить при помощи библиотеки jQuery User Interface (jQuery UI), предоставляющей готовые потрясающие эффекты jquery.

Для работы нам понадобится, прежде всего, обычная страница HTML и библиотека jQuery. Это нужно для того, чтобы для начала написать простейший спойлер, использующий методы jQuery (например, show(), hide(), slideDown() или slideUp()).

Скачаем последнюю библиотеку с офсайта (на момент записи урока это версия 1.7) и подключим ее к нашему документу:

<script type="text/javascript" src="jquery-1.7.min.js"></script>

Теперь напишем простейший спойлер. Нам понадобится 2 блока, первый из которых будет объектом для показа/скрытия второго. Подробно на этих вещах я не останавливаюсь, поскольку все это уже объяснял в уроке "Как сделать FAQ на сайте с использованием PHP-MySQL-jQuery".

Итак, код:

<div class="c">
	<div id="s">Показать</div>
	<div id="t">
		<p>Это скрытый текст</p>
		<p>Это скрытый текст</p>
		<p>Это скрытый текст</p>
		<p>Это скрытый текст</p>
		<p>Это скрытый текст</p>
	</div>
</div>

Здесь мы сделали 3 блока, где блок с классом "с" центрируется в документе. Напишем для них стили:

<style type="text/css">
.c{
	width:250px;
	height:400px;
	position:absolute;
	top:50%;
	left:50%;
	margin:-200px 0 0 -125px;
}
#s{
	width:200px;
	border:1px solid #ccc;
	margin-bottom:5px;
	padding:5px;
	cursor:pointer;
}
#t{
	width:200px;
	border:1px solid #ccc;
	padding:5px;
	display:none;
}
</style>

Поскольку блок спойлера изначально скрыт, мы задали этому блоку свойство "display:none".

Следующим шагом будет создание переключателя toggle(), который по нечетным кликам по блоку с id "s" будет раскрывать спойлер, а по четным кликам — скрывать его:

<script type="text/javascript">
	$(document).ready(function(){
		$('#s').toggle(function(){
			$('#t').show(500);
			$('#s').text('Свернуть');
		}, function(){
			$('#t').hide(500);
			$('#s').text('Показать');
		});
	});
</script>

Отлично!

Мы добились стандартного эффекта для спойлера. Теперь давайте придадим этим эффектам оригинальности. Здесь нам уже потребуется библиотека jQuery UI. Документацию с примерами Вы можете найти по ссылке http://jqueryui.com/
Мы остановимся на двух эффектах (один для показа, второй для скрытия), которые мне понравились — это эффекты "slide" и "explode". Для их использования потребуется скачать библиотеку jQuery UI с нужными компонентами. В частности, нам потребуется само ядро UI (рис. 1):

и ядро эффектов с нужными эффектами (рис. 2):

Все это можно получить в разделе Download.

В полученном архиве в папке js находим нужную библиотеку и подключаем ее к нашему документу:

<script type="text/javascript" src="jquery-ui-1.8.16.custom.min.js"></script>

Все, что осталось — это вызвать метод effect(), именно он отвечает за все эффекты используемой библиотеки. Данный метод имеет несколько параметров:

effect( effect, [options], [speed], [callback] )

Первый параметр является обязательным — в нем указывается название выбранного эффекта — остальные три параметра опциональны, т.е. необязательны:

Итак, заменим наши методы show()/hide() на метод effect() с необходимыми параметрами:

<script type="text/javascript">
	$(document).ready(function(){
		$('#s').toggle(function(){
			$('#t').effect('slide', 1000);
			$('#s').text('Свернуть');
		}, function(){
			$('#t').effect('explode', 1000);
			$('#s').text('Показать');
		});
	});
</script>

Супер!

Мы получили то, что и хотели — 2 потрясающих оригинальных эффекта для нашего спойлера (эффекты jquery). Но только эффектами библиотека jQuery UI не ограничивается, в ней есть масса других готовых оригинальных решений — календарь, аккордеон, вкладки и др.

Использование всех этих вещей ограничено лишь Вашей фантазией.

На этом наш урок завершен. Если Вы столкнетесь с трудностями при использовании того или иного элемента библиотеки jQuery UI — дайте знать, и мы запишем урок, демонстрирующий использование этого элемента.

Удачи и до новых встреч!

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

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

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

Научиться

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