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

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

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>

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. Документацию с примерами Вы можете найти по ссылке 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>

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

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

Современные тенденции и подходы в веб-разработке

Узнайте алгоритм быстрого профессионального роста с нуля в сайтостроении

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