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

jquery эффекты

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

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

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

Детали учебника

Тема: jQuery

Сложность: Средняя

Урок: Видео (.mp4)

Время: 00:39:40

Размер архива: 59.8 Mb

скачать исходникидемоскачать урок

Для работы нам понадобится, прежде всего, обычная страница 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