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

jquery эффекты

От автора: Довольно часто на страницах сайта возникает потребность в так называемом спойлере. Спойлер — это блок, который можно скрывать и вновь показывать. Довольно часто Вы можете увидеть его в новостных блоках, где изначально показан краткий текст новости, а полный текст скрыт и показывается по желанию читателя. Подобный спойлер мы с Вами уже делали в уроке "Как сделать 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&quot;.

Итак, код:

<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):

ядро UI

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

ядро UI

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

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

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

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

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

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

в параметре options передаются специальные опции (проценты, размер, связанный объект), которые необходимы для эффектов, связанных с изменением размера (эффекты "scale", "size" и "transfer");

параметр 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 — дайте знать, и мы запишем урок, демонстрирующий использование этого элемента.

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

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

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

Научиться

Метки:

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

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

Комментарии (24)

  1. Дмитрий

    Спасибо, за виртуальное занятие. Самому уследить за всеми новинками JQUERY довольно сложно. Перевод отличный. Я вижу, что Ваша команда следит за комментариями и прекрасно работает. Благодарю.

  2. Владимир

    Спасибо большое!
    Понравилось, попробую сделать сам.

  3. Валерий

    Спасибо за ценную информацию. К сожалению у меня самого времени нет для этого. Не могли бы сбросить информацию мне на почту о том возможно ли заказать это у Вас и сколько стоят Ваши услуги

    С уважением
    Валерий

  4. Владимир

    Очень интересно

  5. Виктор

    Спасибо! Очень понравилось. Просто и доходчиво.

  6. Игорь

    Огромное спасибо! Как раз подумывал о простых, но эффектных элементах на сайте.

  7. Rin

    Спасибо! Не думал что есть такие эффекты. А где можно посмотреть полный список эффектов UI? Покопался на офф сайте, не нашел.

  8. Виталий

    Здравствуйте
    Что вы делали с сайтом? Обновляли WordPress?
    Подумайте о безопасности меня 3 минуты перебрасывало на страницу http://webformyself.com/wp-admin/install.php с полными правами установки. Хорошо что меня а не того, кто вам почистил бы базу данных.

    • Андрей Кудлай

      Спасибо за заботу :)
      На самом деле там нечего было чистить, БД была пуста и мы ее попросту восстанавливали.
      С сайтом не делали ничего. У хостера были технические проблемы, за что приносим свои извинения.

  9. Виталий

    Пожалуйста. :)
    Когда вы восстановите форум?

  10. Эдуард

    Спасибо за полезную статью!
    Применил на сайте forexstart.my1.ru
    Жду новых статей.

  11. игорь

    Я новичок и первый раз пробовал, что-то сделать на юкоз — спешил, думал сразу все пойдет. Вторая попытка — saga.ucoz.ru шла более спокойно, но когда я нашел ваш сайт на котором Вы обстоятельно все объясняете мне захотелось сделать, что-то самому, а не по бесплатному шаблону. Спасибо и удачи!

  12. Влад

    Классный урок. Классные эффекты.
    Но у меня возникла проблема.
    Попробовал сделать на своей странице на сайте. При открытии страницы показывается текст, который должен быть скрыт. Остальное всё работает. Видно идёт какой-то конфликт. Как можно устранить данную проблему?
    Спасибо за ответ!
    С уважением!

    • Андрей Кудлай

      Без кода вопрос немного абстрактен.
      Содержимое скрывается указанием свойства display.
      Выложите на нашем форуме код, а еще лучше, ссылку на страницу и Вам помогут.

      • Влад

        Добавил стиль и всё заработало, как надо.

        • Андрей Кудлай

          Поздравляю, что разобрались самостоятельно… опыт, приобретенный на своих ошибках с их решением — ценнее всего :)

  13. Влад

    ID на странице неповторим. Если на одной странице необходимо сделать несколько таких кнопочек с выезжающим содержимым, с эффектами, то под каждый вариант необходимо писать отдельный код джава, или как-то можно реализовать это в указанном коде? Если можно, то как?

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

Ваш 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