Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. Web Development

Створюємо вдосконалений тултіп за допомогою надзвичайних можливостей jQuery

by
Read Time:11 minsLanguages:

Ukrainian (українська мова) translation by AlexBioJS (you can also view the original English article)

Браузери автоматично відобразять тултіп (* елемент графічного інтерфейсу, текстова підказка, що спливає при наведені курсора миші. Тут і надалі примітка перекладача), якщо ви встановите значення для властивості title. Для Internet Explorer на цей випадок є властивість alt. Проте у цьому посібнику я покажу вам, як швидко написати плаґін jQuery, завдяки якому звичайний тултіп браузера буде замінено на дещо більш кльове.




Одним із чудових інструментів у нашій скриньці веб-розробника є тултіпи. Тултіп – прямокутник,
що з'являється, коли ви переміщуєте курсор поверх елемента, наприклад гіперпосилання. Він надає додаткову
 інформацію про цей елемент. Наприклад, посилання з невеликою кількістю тексту або без нього (іконка) може ввести в оману.
Додайте всередині вашого тултіпу додаткове речення або два, щоб пояснити вашим користувачам, що відбудеться при її натисканні.


Перед початком роботи

Цей посібник, скоріш за все, належав би до категорії Intermediate (* середньої складності). При написанні інструкцій припускалося, що ви маєте хоча би
базові уявлення про HTML/CSS, техніку обрізування зображень та jQuery.

Якщо вам потрібно освіжити у пам'яті знання про jQuery, то ось вам декілька рекомендованих сайтів:

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

The file structureThe file structureThe file structure

Нижче наводиться короткий опис того, що являє собою кожний файл/папка:

  • Папка із зображеннями містить наступні зображення:
  • - - tipTip.png - створено у Кроці 2
  • - - tipMid.png - створено у Кроці 2
  • - - tipBtm.png - створено у Кроці 2
  • index.html - - створено у Кроці 3
  • style.css - створено у Кроці 3
  • jquery-1.3.1.min.js - завантажте цей файл за посиланням
  • jquery.betterTooltip.js - - створено у Кроці 5

Крок 1: Для початку проявляємо трохи креативності

Відкрийте Photoshop або інший ваш улюблений редактор зображень та зробіть нашвидкуруч чудовий тултіп. Замість того,
щоб створювати його на простому білому фоні, можливо, буде корисним, якщо ви намалюєте ваш тултіп на фоні, подібному до того, що використовується на вашому сайті.
Завдяки цьому він буде гармонічно сполучатися з фоном. Правду кажучи,
для його створення нема протореного шляху. Просто підключіть власну уяву та креативність.

Initial Tooltip DesignInitial Tooltip DesignInitial Tooltip Design

Крок 2: Ділимо тултіп на частини

Для нашої конкретної реалізації тултіпу вам потрібно буде його розрізати на 3 різних зображення. Форматом цієї конкретної реалізації буде PNG (* Portable Network Graphics – мобільна мережна графіка; формат, використовуваний для графічних файлів у Інтернеті, аналогічний формату GIF, але з помітно кращим ущільненням. Належить до вільно поширюваного ПЗ, підтримуваний багатьма браузерами формат, використовуваний для графічних файлів у Інтернеті, аналогічний формату GIF, але з помітно кращим ущільненням. Належить до вільно поширюваного ПЗ, підтримуваний багатьма браузерами) для зберігання можливості використання прозорого фону.
1) верхня частина. 2) шматочок висотою в 1 px, що буде продубльовано по вертикалі в середній частині тултіпу. 3) нижня частина. На четвертій частині схеми показані три
частини після того, як вони були вирізані.

Помістіть ці зображення до папки під назвою "images".

Slice up the tooltipSlice up the tooltipSlice up the tooltip

Примітка: Internet Explorer не підтримує можливість використання прозорості PNG-файлів. Навіть IE 7 тільки частково підтримує її. Якщо ви зробите анімацію
зображень у форматі PNG за допомогою JavaScript, то будь-яка прозора частина моментально почорніє, коли буде знаходитися у русі. Я використовую цю реалізацію,
 чудово розуміючи, що в IE виникнуть проблеми, які важко виправити.


Крок 3: Пишемо код HTML/CSS

Тепер, коли ми маємо шматочки зображення, ми можемо перейти до створення розмітки HTML та коду CSS. Це буде найлегша частина
всього посібника.

Код HTML

Скоро ми перемістимо цей код до зовнішнього файлу JavaScript, так що просто введіть його в редакторі,
що знаходиться у вас під рукою і до якого ви зможете пізніше звернутися.

У нас є три теги div. Два дочірніх всередині батьківського. Перший div, "tip", буде використовуватися для об'єднання решти
та відображувати верхню частину тултіпу – tipTop.png.

Другий, "tipMid", через деякий час буде містити текст, який буде відображатися тултіпом. Також в якості фонового зображення у ньому буде використовуватися tipMid.png, що повторюється в ньому по вертикалі.

Третій, "tipBtm", служить виключно для відображення нижньої частини тултіпу – tipBtm.png.

Всередині index.html додайте деяку кількість тексту-заповнювача та якісь елементи, властивості title яких мають якісь значення. Наприклад:

У заголовку index.html вам потрібно буде підключити таблицю стилів та два файли JavaScript.

Код CSS

Правила CSS для цього тултіпу відносно прості, додайте лише наступний код до style.css.

Давайте поясню код вище.

Елемент-обгортка, з класом .tip, використовується для об'єднання решти елементів. В якості значення поля (* полем називається відстань від внутрішнього краю рамки елемента до уявленого прямокутника, що відокремлює його вміст) від верхнього краю вмісту елемента задано 37px.
Це значення висоти фонового зображення. Завдяки цьому полю дочірні елементи буде переміщено донизу для показу
зображення, що знаходиться за ними. Також для цього елемента встановлюється абсолютне позиціонування, завдяки чому ми можемо переміщувати цей елемент поверх контенту
сторінки.

Для решти класів просто задано у якості фону фонове зображення і у випадку з .topMid задані значення поля навколо елемента для надання
контенту, що буде розташовуватися всередині елемента, певного вільного простору.


Крок 4: Чому варто використовувати плаґін

jQuery сама по собі дуже крута. Проте увесь її потенціал розкривається при створення плаґіна. При оформленні коду у
вигляді плаґіна у вас з'являється можливість його повторно використовувати. Завдяки цьому ви можете скласти бібліотеку коду та ніколи не писати
 той самий код двічі.

Нижче наводиться весь код плаґіна:


Крок 5:  Пишемо код плаґіна

Тепер, коли ви ознайомилися з кодом, прийшов час проаналізувати його:
Для початку створіть файл .js та назвіть його jquery.betterTooltip.js, щоб він
відповідав стандартам плаґініа для jQuery.

До цього файлу додайте наступний код:

Тут створюється публічна функція, яку може бути викликано з заголовку документа
 або іншого зовнішнього файлу .js. Для запуску вашого плаґіна вам потрібно виконати наступний рядок коду всередині
обробника події ready $(document).ready(function(){}).

Завдяки цьому рядку коду плаґін буде підключено до кожного елементу з класом під назвою "tTip". Подібним чином ви
могли би підключити його до будь-якого потрібного вам елемента.

Надаємо можливість внесення змін у налаштування плаґіна

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

Завдяки  цьому налаштування "speed" та "delay" можна змінювати при виклику плаґіна наступним чином:

Ці налаштування зовсім необов'язкові. Якщо їх не вказано, то у плаґіні будуть використовуватися значення за налаштуванням.

Додаємо код HTML для тултіпу

Пам'ятаєте код HTML, який ви написали для тултіпу? Ось і прийшла його черга.
У цьому коді використовується метод jQuery prepend() для маніпулювання контентом для додавання тултіпу
одразу після відкриваючого тегу body. Завдяки цьому ми можемо гарантувати, що тултіп
розташовується поверх решти елемнтів.

Функція $(this).each

Це один з найважливіших та найкорисніших аспектів плаґіна jQuery. Функція $(this).each
 перебирає кожний елемент на сторінці, до якого підключено плаґін, після свого виклику. У нашому випадку
це всі елементи з класом "tTip". При переборі завдяки цій функції до кожного елементу застосовуються
 вказані вами властивості та методи.

Код функції доволі простий. Верхня половина складається з деякої кількості властивостей для завдання значень висоти, ширини, координат x та y
і навіть значення атрибута title елементів з класом "tTip". Я використовую метод jQuery offset() для отримання значень позиції елемента (* відносно документа). Також є
функція hover(), назначена для кожного елемента з класом "tTip", завдяки якій викликаються методи при переміщенні курсору поверх елемента та за його межі. Ці елементи будуть
 описані пізніше у посібнику.

Одна з важливих частин цієї функції  $(this).each – рядок коду, завдяки якому видаляється значення атрибута title:

Головний смисл нашого плаґіна для створення тултіпа – заміна
звичайного тултіпа більш привабливою його версією. Якщо ви не видалите значення атрибута title, яке браузер
використовує для генерації звичайного тултіпа, то вийде дуель тултіпів. На зразок цієї:

Avoid duel tooltipsAvoid duel tooltipsAvoid duel tooltips

Затримка виникнення анімації Fade-in (* поступове проявлення зображення) тултіпу

Ці два методи, setTimer та stopTimer, використовуються для створення затримки з'явлення тултіпу після того, як користувач перемістив
 свій курсор поверх елемента з класом "tTip" і тултіп з'явився.
Важливо уникати набридання користувачеві. Впевнений, нас усіх достають ситуації, коли ми випадково переміщуємо курсор
поверх спливаючої реклами, прихованої у контенті сайтів.

Завдяки методу setTimer створюється об'єкт setInterval, завдяки якому викликається "showTip()" після того, як вийшов відведений час.
Для того щоб передана до setInterval () функція не викликалася нескінченно, викликається метод stopTimer для зупинення об'єкта setInterval.

Позиціонування тултіпу

Функція hover() всередині петлі $(this).each(), що була створена раніше, викликає setTip(). Її призначення – розмістити
 тултіп прямо над елементом з класом "tTip". Це виконується до запуску анімації fade-in.

Анімація Fade-in

І останнє, але не менш важливе – функція showTip(). У ній використовується метод jQuery's animate() для поступового проявлення зображення тултіпу
завдяки ковзному руху (* поступово збільшуючи їх висоту).


Підведення підсумків...

Тепер, коли ви завершили плаґін та задоволені результатом, можете застосувати його
у реальному світі у своїх проектах.

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

Дякую за проявлену зацікавленість до цього посібника! Сподіваюся, що він прояснив вам, як ви можете використовувати jQuery для покращення
інтерфейсу вашого сайту.

Залишайте коментарі! Хочу дізнатися вашу думку. Чи дійсно цей прийом допомагає користувачам легше справлятися з труднощами, або ж
це просто чергова надокучлива фігня?

  • Підпишіться на NETTUTS RSS Feed, щоб бути в курсі про нові посібники та статті з веб-розробки.


Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.