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

Дата публикации: 2012-03-24

jquery эффекты

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

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

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

JavaScript. Быстрый старт

Изучите основы JavaScript на практическом примере по созданию веб-приложения

Узнать подробнее

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

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

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

1	<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>

<div id="s">Показать</div>

<p>Это скрытый текст</p>

</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>

.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>

$(document).ready(function(){

$('#s').toggle(function(){

$('#t').show(500);

$('#s').text('Свернуть');

}, function(){

$('#t').hide(500);

$('#s').text('Показать');

});

</script>

Отлично!

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

JavaScript. Быстрый старт

Изучите основы JavaScript на практическом примере по созданию веб-приложения

Узнать подробнее

ядро UI

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

ядро UI

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

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

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

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

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

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

1	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>

$(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. Быстрый старт

Изучите основы JavaScript на практическом примере по созданию веб-приложения

Узнать подробнее