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

17

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

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

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

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

Для роботи нам знадобиться, перш за все, звичайна сторінка 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):

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

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

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

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

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

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

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

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

у параметрі options передаються спеціальні опції (відсотки, розмір, зв’язаний об’єкт), які необхідні для ефектів, пов’язаних із зміною розміру (ефекти «scale», «size» та «transfer»);

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

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