Всплывающие подсказки jQuery

Опубликовано: 15 Декабрь 2010Автор ratemir

Всплывающие подсказки jQueryВ jQuery плагине clueTip собрано сочетание разных способов показа всплывающих подсказок, что позволяет легко украсить их внешний вид и при этом, обладать множеством возможностей. Установка стандартная и не потребует больших усилий.

Для того,чтобы показывать всплывающие подсказки с помощью атрибута title необходимо добавить соответствующую html разметку. Вот как она будет выглядеть:

<p><a id="houdini" href="houdini.html" title="Houdini was an escape artist.|He was also adept at prestidigitation.">Houdini</a></p>

Далее, файлы, которые необходимо подключить. Во первых Вы должны подключить файл стилей (jquery.cluetip.css), который можно редактировать по своему усмотрению. Во вторых указать пути к скриптам js. То есть включить основной файл JQuery, который будет подгружаться с серверов Google и clueTip плагин в <head>, на странице сайта. Вы можете добавить hoverIntent плагин, предлагаемый разработчиком, но который необязателен. Я всё расположил так:

<link rel="stylesheet" href="jquery.cluetip.css" type="text/css" />
<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js'></script>
<script src="jquery.cluetip.js" type="text/javascript"></script>

После чего, активируем всё то, что мы прописали.

<script type='text/javascript'>
$(document).ready(function() {
  $('#houdini').cluetip({
    splitTitle: '|',
	width: '200px',
	tracking: true
  });
});
</script>

Хочу заметить, в нашем случае был задействован вывод всплывающих подсказок с помощью свойства title, но данный плагин имеет возможности применения технологий Ajax. По умолчанию, clueTip плагин будет использовать rel атрибут для загрузки содержимого в подсказке:

<p><a class="tips" href="fragment.html" rel="fragment.html">show me the cluetip!</a></p>

То есть будет подгружаться та информация, которая находится в указанном Вами файле(например, fragment.html) в свойстве rel. Такой способ удобен, если содержание подсказки очень велико и кроме текста необходимо добавить изображения и что-то ещё. В нашем случае инициализация станет такой:

<script type='text/javascript'>
$(document).ready(function() {
  $('a.tips').cluetip();
  });
</script>

Если вы хотите, например, прикрепить подсказки на все ссылки с классом «tips», следует просто написать в вашем jQuery коде: $('a.tips').cluetip (); (как это сделано выше). Вы также можете менять внешний вид всплывающих подсказок, их местоположение, размер с помощью некоторых условий. Ниже приводится несколько примеров того, как может выглядеть clueTip на Вашей странице, используя широкий спектр возможностей.

topOffset: 15 Смещение всплывающего элемента сверху от целевого объекта. Значение задаётся в пикселах. То есть спустили на 15px.

leftOffset: 15 Смещение всплывающего элемента слева от целевого объекта. Значение задаётся в пикселах. Соответственно, подвинули влево на 15px.

splitTitle: '|' Название подсказки и главная её часть определяется при помощи выбранного Вами разделителя. То есть до разделителя — заголовок, а после остальное.

width: '200px' Ширина всплывающего окна

height: '300px' Высота всплывающего окна

tracking: true Отслеживание движения мыши. Появившееся поле будет следовать за курсором.

showTitle: false Убираем заголовок

sticky: true Сохранять видимость, пока не произойдет закрытие вручную

closePosition: 'title' Расположение текста «Close»(закрыть) в заголовке подсказки, по нажатии, которой окно закроется. Можно также выбрать «top» или «bottom».

arrows: true Показывает стрелку на соответствующей стороне подсказки

local:true Разрешает использование местного контента(с той же страницы) из скрытого div элемента, id которого соответствует значению rel

<a class="load-local" href="#loadme" rel="#loadme">Наведи мышь</a>
<div id="loadme">Этот текст появится в подсказке</div>

В файле CSS прописать #loadme{display: none;} , чтобы текст был виден только в окне подсказки.

activation: 'click' Всплывающая подсказка не появится пока не кликните по объекту.

dropShadow: false Пропишите данное значение, если не хотите появления теней.

mouseOutClose: true Всплывающее окно закроется, когда курсор окажется за пределами него.

cluetipClass: 'rounded' Закругление углов всплывающей подсказки

Чтобы увидеть или поправить значения конфигурации, задаваемые по умолчанию, откройте файл jquery.cluetip.js и в конце него Вы их найдете.

Посмотреть пример работы плагина
Скачать последнюю версию плагина

Метки: Рубрика: Технологии jQuery


Опубликовать в twitter.comПоделиться ВКонтактеПоделиться в FacebookПоделиться В Моем МиреОпубликовать в своем блоге livejournal.com
Если Вам понравилась статья, Вы можете получать новые материалы Ratemir.ru по: RSS или можете просто получать обновления блога на e-mail:

Ещё по теме...


2 комментариев к “Всплывающие подсказки jQuery”

  • Аркадий
    18 Сентябрь, 2011, 9:57

    Спасибо за материал! Есть ли возможность регулировки тени? Хотелось бы, чтобы падала влево и была бы чуть шире и бледнее.

    При использовании варианта с fragment.html кодировка windows-1251 не проходит, а с utf-8 русский текст становится читабельным.

  • ratemir
    29 Сентябрь, 2011, 12:18

    Размер, прозрачность и даже цвет тени можно поменять в файле jquery.cluetip.js Где-то на 64-й строке.

Оставить комментарий

Наверх