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

Від автора: Досить часто на сторінках сайту виникає потреба у так званому спойлері. Спойлер — це блок, який можна приховувати і знову показувати. Досить часто Ви можете побачити його в новинних блоках, де спочатку показаний короткий текст новини, а повний текст прихований і показується за бажанням читача. Подібний спойлер ми з Вами вже робили на уроці “Як зробити FAQ на сайті з використанням PHP-MySQL-jQuery”.

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

Цей момент можна виправити за допомогою бібліотеки jQuery User Interface (jQuery UI), що надає готові приголомшливі ефекти jquery.

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

Завантажити останню бібліотеку з офсайта (на момент запису уроку це версія 1.7) і підключимо її до нашого документа:

Тепер напишемо найпростіший спойлер. Нам знадобиться 2 блоки, перший з яких буде об’єктом для показу/приховування другого. Детально на цих речах я не зупиняюся, оскільки все це вже пояснював уроці “Як зробити FAQ на сайті з використанням PHP-MySQL-jQuery”.

Отже, код:

Тут ми зробили 3 блоку, де блок з класом “з” центрується в документі. Напишемо для них стилі:

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

Оскільки блок спойлера спочатку приховано, ми задали цього блоку властивість “display:none”.

Наступним кроком буде створення перемикача toggle(), який по непарних кліки по блоку з id “s” буде розкривати спойлер, а по парних кліки — приховувати його:

$(document).ready(function(){
$(‘#s’).toggle(function(){
$(‘#t’).show(500);
$(‘#s’).text(‘Згорнути’);
}, function(){
$(‘#t’).hide(500);
$(‘#s’).text(‘Показати’);
});
});

Відмінно!

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

і ядро ефектів з потрібними ефектами (рис. 2):

Все це можна отримати в розділі Download.

В отриманому архіві в папці js знаходимо потрібну бібліотеку і підключаємо її до нашого документа:

Все, що залишилося — це викликати метод effect(), саме він відповідає за всі ефекти використовуваної бібліотеки. Даний метод має кілька параметрів:

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

Перший параметр є обов’язковим — у ньому вказується назва вибраного ефекту — інші три параметра опціональні, тобто необов’язкові:

Отже, замінимо наші методи show()/hide() метод effect() з необхідними параметрами:

$(document).ready(function(){
$(‘#s’).toggle(function(){
$(‘#t’).effect(‘slide’, 1000);
$(‘#s’).text(‘Згорнути’);
}, function(){
$(‘#t’).effect(‘explode’, 1000);
$(‘#s’).text(‘Показати’);
});
});

Супер!

Ми отримали те, що хотіли — 2 приголомшливих оригінальних ефекту для нашого спойлера (ефекти jquery). Але тільки ефектами бібліотека jQuery UI не обмежується, у неї є маса інших готових оригінальних рішень — календар, акордеон, вкладки та ін.

Використання всіх цих речей обмежена лише Вашою фантазією.

На цьому наш урок закінчено. Якщо Ви зіткнетеся з труднощами при використанні того чи іншого елемента бібліотеки jQuery UI — дайте знати, і ми запишемо урок, що демонструє використання цього елемента.

Удачі і до нових зустрічей!