Jquery спливаючі підказки, за допомогою плагіна tiptip, xozblog - уроки і статті по створенню сайту

підключення плагіна

Для початку слід підключити все необхідне для роботи плагіна.

А також стилі CSS, для оформлення підказки. Стилі досить прості, так що можна сміливо налаштувати їх на смак.

Підказки побудовані на блоках DIV. І мають наступну структуру:







Використання

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

Далеко-далеко за словесними
горами в країні голосних і приголосних.

Тепер потрібно додати наступних код:

C допомогою jQuery селектора вибираємо всі елементи з класом (.top) і викликаємо метод tipTip з параметрами (maxWidth і defaultPosition).

Класи можна комбінувати:

$ # 40; ".tip. Tip2" # 41 ;. tipTip # 40; # 41; ;

  • activation. рядок ( «hover» за замовчуванням) - при якому подію з'являється підказка. Доступні: «hover». «Focus» та «click»;
  • keepAlive. true або false (false за замовчуванням) - якщо встановити true тоді підказка не зникне поки на неї не наведуть курсор;
  • maxWidth. рядок ( «200px» за замовчуванням) - максимальна ширина підказки, цей параметр може приймати значення «auto»;
  • edgeOffset. число (3 за замовчуванням) - відстань в пікселях від посилання до підказки;
  • defaultPosition. рядок ( «bottom» за замовчуванням) - положення підказки щодо посилання. Доступні: «top». «Bottom». «Left» і «right»;
  • delay. число (400 за замовчуванням) - кількість мілісекунд затримки перед показом підказки;
  • fadeIn. число (200 за замовчуванням) - швидкість появи підказки в мілісекундах;
  • fadeOut. число (200 за замовчуванням) - швидкість зникнення підказки в мілісекундах;
  • attribute. рядок ( «title» за замовчуванням) - атрибут HTML, вміст якого відобразиться в підказці;
  • content. true або false (false за замовчуванням) - HTML або текст буде обраний в якості контенту для підказки;
  • enter. функція зворотного виклику - призначена для користувача функція, яка виконується щоразу при наведенні курсору миші на посилання.
  • exit. функція зворотного виклику - призначена для користувача функція, яка виконується всякий раз, коли забирається курсор від посилання.

Щоб залишатися в курсі свіжих статей і уроків підписуйтесь на сторінку ВКонтакте або додавайте в кола на Google+. Дякуємо!

Схожі статті