GetTip - настраиваемые всплывающие подсказки для uCoz - Скрипты - UCOZ - Каталог файлов - Каморка
kamorka
Menu
Правила чата
Пользователи онлайн
Мини-чат
+Мини-чат
0
Онлайн всего: 1
Гостей: 1
Пользователей: 0
   Категории

Комментарии

KaMoRkA.uCoz.com -- uCoz -- Скрипты


GetTip - простой jQuery плагин для создания всплывающих подсказок из атрибута title любого элемента. Плагин довольно простой и имеет небольшой размер, однако обладает всеми необходимыми опциями, такими как например: изменение позиции подсказок, задержки появления, плавности, и события для срабатывания.

Особенности:
• Отображение при наведении, нажатии или фокусировке.
• Параметры могут быть заданы через атрибут data-tooltip.
• Автоматическое отключение после тайм-аута.
• Пользовательский переход на входе / выходе.

Установка скрипта:

1. В нижней части сайта пропишите ссылки на скрипт, стили, и скрипт вызова:

Код
<script src="http://fullweb.ucoz.ru/SCRIPTS/GetTip/gettip.js"></script>  
<link rel="stylesheet" href="http://fullweb.ucoz.ru/SCRIPTS/GetTip/gettip.css"/>  
<script>  
$(document).ready(function() {  
$('[data-tooltip]').getTip({  
  offset : 8, // Отступ (в пикс.)  
  pos : 'top', // Позиция ("left", "top", "right", "bottom")  
  on : 'hover', // Событие ("hover", "click", "focus")  
  delay : 0, // Задержка (в мс.)  
  duration : 200, // Плавность (в мс.)  
});  
});  
</script>


В скрипте вызова, как видно, задаются и общие настройки для подсказок.
Все файлы, для надежности, лучше сохраните себе.

2. А вот так прописывается любой элемент, к которому вы хотите привязать подсказку. Рассмотрим на примере обычной ссылки:

Код
<a href="#" data-tooltip="" title="Текст подсказки">Ссылка</a>


То есть если вы хотите чтоб у всех элементов подсказки были одинакового типа, то просто в скрипте вызова задайте общие настройки, а к нужным элементам добавьте пустой атрибут data-tooltip. Но если для какого-то элемента нужны индивидуальные настройки, то в этом атрибуте, в фигурных скобках - можно указать для него параметры, по такому же типу как и в скрипте. Например:

Код
<a href="#" data-tooltip="{offset: 20,pos: 'bottom',on: 'click',delay: 228,duration: 30}" title="Необычная подсказка">Ссылка</a>

Важно!

При копировании материала указывать ссылку на источник.

- 345
- 29-Октября-2017
- 0
Материал разместил:

Похожий материал
Статьи сайта