Плагін Tooltip бібліотеки jQueryUI. Створення користувальницьких підказок

1

Від автора: у даному уроці ми з Вами розглянемо плагін бібліотеки jQuery UI – Tooltip, який дозволяє дуже швидко і легко прикрасити підказки, утворені атрибутом title html-елементів. До того ж він дозволяє не тільки змінити дизайн підказок, а і додати різні анімаційні ефекти в момент появи і приховування підказок.

Плагін Tooltip бібліотеки jQueryUI. Створення користувальницьких підказокПлагін Tooltip бібліотеки jQueryUI. Створення користувальницьких підказок

Завантаження бібліотеки

Отже, насамперед необхідно скачати і підключити бібліотеку jQuery UI. Нагадаю, що завантажити бібліотеку можна на офіційному сайті http://jqueryui.com, перейшовши за посиланням Download.

Плагін Tooltip бібліотеки jQueryUI. Створення користувальницьких підказок

Далі необхідно вибрати режим завантаження, тобто або Ви завантажуєте повну версію бібліотеки з повним набором віджетів функцій і ефектів, або завантажуєте тільки те, що Вам потрібно (галочками відзначаєте потрібні компоненти бібліотеки). Я віддаю перевагу зайвого не качати, тому для скачування я вибрав тільки віджет Tooltip, повний набір ефектів і, звичайно ж, ядро бібліотеки. Далі нагадаю, що Ви можете перед скачуванням вибрати колірну схему відображуваних елементів бібліотеки для цього або вибрати з випадаючого списку конкретний стандартний стиль або ж можна згенерувати колірної стиль самому, перейшовши за посиланням «design a custom theme». Після вибору колірної схеми завантажуємо бібліотеку.

Після скачування бібліотеки, ми отримуємо архів, його необхідно розпакувати і скопіювати потрібні файли до нас на сайт.

Установка бібліотеки

Для сьогоднішнього уроку ми будемо розглядати наступний сайт:

Плагін Tooltip бібліотеки jQueryUI. Створення користувальницьких підказок

Даний сайт складається всього з однієї сторінки, і він дуже простий. Його вихідний код я показувати зараз не буду, так як у Вас будуть його исходники. Скажу, тільки що у кожного заголовка статей описаний атрибут title, що необхідно для роботи Tooltip.

Тепер після розпакування завантаженої бібліотеки, нам необхідно скопіювати вміст папки js в аналогічну папку нашого сайту. А також скопіювати вміст папки CSS в однойменну папку сайту (включаючи папку images). Також для даного уроку необхідна бібліотека jQuery, але вона йде в комплекті з jQuery UI, тому ми її окремо скачувати не будемо.

Далі, необхідно підключити бібліотеку jQuery і jQuery UI до тестового сайту:

Далі створимо і підключимо порожній файл script.js, в якому будемо вести кодування на мові JavaScript:

Потім, необхідно підключити файл зі стилями бібліотеки jQuery UI:

Установка завершена, тепер давайте замінимо підказки стандартного атрибута title на підказки бібліотеки jQuery UI.

Перше використання

Отже, переходимо в файл script.js оберемо за допомогою jQuery всі посилання заголовків статей і застосуємо плагін Tooltip. Для цього додамо наступний код:

$(«td.td_top a»).tooltip({
});

Тепер давайте перейдемо в браузер і подивимося, що вийшло:

Плагін Tooltip бібліотеки jQueryUI. Створення користувальницьких підказок

Як Ви бачите, віджет Tooltip, успішно відпрацьовує. Тепер, аналогічно, замінимо стандартні підказки у зображень:

$(‘img’).tooltip({
});

Далі перейдемо в браузер і оновимо сторінку:

Плагін Tooltip бібліотеки jQueryUI. Створення користувальницьких підказок

Як Ви бачите, знову ж таки, все працює.

Налаштування віджета

Отже, перша налаштування, дозволить замінити стандартний вміст віджета, з атрибута title, на довільний. Дана настройка має назву content. Давайте розглянемо наступний фрагмент коду:

$(«td.td_top a»).each(function() {
var text = $(this).text();
text = «Тестовий сайт ->» + text;
$(this).tooltip({
content:text
});
});

Цю ділянку коду, додає до вмісту підказки рядок «Тестовий сайт -> «. Дивіться, вибираємо за допомогою jQuery всі посилання заголовків статей. Так як статей у нас багато, значить, у вибірку потрапить кілька елементів. Тому викликаємо метод each(), який створить свого роду цикл. І всередині даного методу описуємо функцію, яка виконується для кожного елемента вибірки. У тілі функції ми створюємо змінну text і зберігаємо в ній значення атрибута title поточного елемента. Далі до значення змінної text, додаємо рядок «Тестовий сайт -> «.

І, нарешті, звертаємося до елемента, використовуючи this і викликаємо метод tooltip, передаючи йому налаштування content. Зверніть увагу, що налаштування передаються у вигляді властивостей об’єкта. Тепер давайте подивимося, що у нас вийшло:

Плагін Tooltip бібліотеки jQueryUI. Створення користувальницьких підказок

Тепер давайте розглянемо ще декілька налаштувань. Для цього додамо наступний код:

$(‘img’).tooltip({
show:{
effect:’drop’,
duration:700,
easing:»easeOutBounce»
},
hide:{
effect:’explode’,
duration:500,
delay:500
},
//disabled:true
//items:’#id’
position:{
//my:’left top’,
//о:’bottom right’
},
tooltipClass: «my_class»,
open:function() {
//alert(‘Open widget’)
}
//track:true

Отже, налаштування віджета tooltip:

show — дозволяє задати анімаційний ефект, у момент появи підказки. У свою чергу вона приймає ще три параметра: effect — назва анімаційного ефекту; duration — тривалість анімації в мілісекундах; delay:500 — затримка виконання анімації, в мілісекундах; easing:»easeOutBounce» – прискорення виконання анімаційних ефектів (повний список усіх варіантів easing можна подивитися на сторінці http://api.jqueryui.com/easings/).

hide: — аналогічно раніше розглянутого, за винятком того, що дана настройка управляє анімаційними ефектами в момент приховування підказки;

disabled — якщо True — відключає віджет;

items — за допомогою даної настройки можна уточнити, до якого з дочірніх елементів вибірки, необхідно застосовувати віджет tooltip. Дана настройка актуальна, якщо у Вас у вибраному елементі містить дочірні елементи для яких необхідно застосувати віджет Tooltip. Items – приймає параметром селектор, елемента для якого повинен застосовуватися віджет;

position: — ця настройка дозволяє позиціонувати підказку щодо елемента. Дана настройка приймає об’єкт, з двома властивостями. Перше властивість «at» – ставить крапку на елементі, щодо якої буде виконано позиціонування підказки (наприклад ставимо крапку на зображенні, щодо якої буде виконано позиціонування підказки). І друге властивість «my» – визначає точку на блоці з підказкою, тобто точка, яка буде позиціонуватися відносно точки, заданої параметром «at». Давайте подивимося в браузері, як змінитися позиціонування підказки:

Плагін Tooltip бібліотеки jQueryUI. Створення користувальницьких підказок

tooltipClass – дозволяє задати ім’я класу, який буде доданий до блоку з підказкою. Цей параметр дуже корисний, якщо Вам необхідно змінити дизайн блоку з підказкою. Наприклад, класу «my_class», можна додати дуже просте правило – для тестування:

.my_class {
border:1px solid red !important;
}

track – якщо передати даній настройці значення true, то блок з підказкою буде, як би прилипати до курсора миші і пересуватися разом з нею в межах елемента.

Крім настройок, у віджета Tooltip є таке поняття, як події. Події спрацьовують при виконанні певних умов. Основним і найбільш корисним подією є подія open. Події дають нам можливість описати функцію, яку буде виконано, при спрацьовуванні події. Подія Open спрацьовує при показі підказки.

Налаштування зовнішнього вигляду

Змінити зовнішній вигляд блоку з підказкою, можна шляхом редагування правил CSS. Перше — це завдання власного класу, використовуючи налаштування tooltipClass. Також, так як блок з підказкою формується бібліотекою jQuery UI, значить, дана бібліотека автоматично додає власні класи до блоку з підказкою. Отже, клас .ui-tooltip доданий до блоку з підказкою та його правила описані у файлі стилів, який ми завантажили разом з бібліотекою jQuery UI. Текст також містить клас — ui-tooltip-content, якому можна додати правил, наприклад:

.ui-tooltip-content {
border:1px solid red !important;
}

Давайте перейдемо в браузер і подивимося на зміни:

Плагін Tooltip бібліотеки jQueryUI. Створення користувальницьких підказок

Як Ви бачите, дуже просто змінити дизайн блоку з підказкою. Ось і все, що я хотів би Вам розповісти з цього плагіну. Тому якщо Вас зацікавив даний віджет, використовувати його у своїх напрацюваннях.

А зараз давайте прощатися. Всього Вам доброго і вдалого кодування!!!