Плагін Tooltip бібліотеки jQueryUI
Завантаження бібліотеки
Отже, насамперед необхідно завантажити та підключити бібліотеку jQuery UI. Нагадаю, що завантажити бібліотеку можна на офіційному сайті http://jqueryui.com, перейшовши на посилання Download.
Безкоштовний курс «Full-Stack практика»
Далі необхідно вибрати режим скачування, тобто або Ви завантажуєте повну версію бібліотеки з повним набором віджетів функцій та ефектів, або завантажуєте тільки те, що Вам потрібно (галочками відзначаєте необхідні компоненти бібліотеки). Я волію зайвого не качати, тому для завантаження я вибрав тільки віджет Tooltip, повний набір ефектів і, звичайно, ядро бібліотеки. Далі нагадаю, що Ви можете перед завантаженням вибрати колірну схему елементів бібліотеки, що відображаються, для цього або вибрати з випадаючого списку конкретний стандартний стиль, або ж можна згенерувати колірний стиль самому, перейшовши за посиланням “design a custom theme”. Після вибору колірної схеми викачуємо бібліотеку.
Після завантаження бібліотеки, ми отримуємо архів, його необхідно розпакувати та скопіювати потрібні файли до нас на сайт.
Встановлення бібліотеки
Для сьогоднішнього уроку ми розглядатимемо наступний сайт:
Цей сайт складається всього з однієї сторінки, і він дуже простий. Його вихідний код я показувати зараз не буду, тому що у Вас будуть вихідні коди. Скажу, що у кожного заголовка статей описаний атрибут title, що потрібно роботи Tooltip.
Тепер після розпакування завантаженої бібліотеки нам необхідно скопіювати вміст папки js в аналогічну папку нашого сайту. А також скопіювати вміст CSS в однойменну папку сайту (включаючи папку images). Такождля цього уроку необхідна бібліотека jQuery, але вона йде в комплекті з jQuery UI, тому ми її окремо не завантажуватимемо.
Далі, необхідно підключити бібліотеку jQuery та jQuery UI до тестового сайту:
Потім необхідно підключити файл зі стилями бібліотеки jQuery UI:
Установка завершена, тепер давайте замінимо підказки стандартного атрибуту title на підказки бібліотеки jQuery UI.
Перше використання
Отже, переходимо у файл script.js, виберемо за допомогою jQuery всі посилання заголовків статей та застосуємо плагін Tooltip. Для цього додамо наступний код:
Тепер давайте перейдемо до браузера і подивимося, що вийшло:
Як Ви бачите, віджет Tooltip успішно відпрацьовує. Тепер, аналогічно, замінимо стандартні підказки у зображень:
Далі перейдемо до браузера і оновимо сторінку:
Безкоштовний курс «Full-Stack практика»
Як Ви бачите, знову ж таки все працює.
Налаштування віджету
Отже, перше налаштування дозволить замінити стандартний контент віджету з атрибуту title на довільний. Ця установка має назву content. Давайте розглянемо наступну ділянку коду:
Дана ділянка коду додає до вмісту підказки рядок «Тестовий сайт -> “. Дивіться, вибираємо за допомогою jQuery усі посилання заголовків статей. Так як статей у нас багато, значить у вибірку потрапить кілька елементів. Тому викликаємо метод each(), який створить свого роду цикл. І всередині цього методу описуємо функцію, яка виконається для кожного елемента вибірки. У тілі функції ми створюємо змінну text і зберігаємо значення атрибуту title поточного елемента. Далі до значення змінної text додаємо рядок «Тестовий сайт -> “.
І наостанок,звертаємося до вибраного елемента використовуючи це і викликаємо метод tooltip, передаючи йому налаштування content. Зверніть увагу, що налаштування передаються як властивості об'єкта. Тепер давайте подивимося, що в нас вийшло:
Тепер розглянемо ще кілька налаштувань. Для цього додамо наступний код:
Отже, налаштування віджету 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”. Давайте подивимося в браузері, як змінитись позиціонування підказки:
tooltipClass – дозволяє встановити ім'я класу, який буде додано до блоку з підказкою. Це налаштування дуже корисне, якщо Вам необхідно змінити дизайн блоку з підказкою. Наприклад, класу «my_class» можна додати дуже просте правило – для тестування: