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

Обзор всплывающих подсказок на jQuery. Наверху самые лучшие, в низу - простые, не имеющие дополнительных возможностей, кроме как отображения текста! Для всех подсказок лучше, чем здесь - просьба указывать их адрес в комментариях! В низу страницы указан список всех найденных автором всплывающих подсказок на jQuery, которые в некоторых случаях могут пригодиться Вам.

1. Подсказки qTip!

Подсказки хороший инструмент - для отображения дополнительной ифнормации. Подсказки могут быть любого типа. Вы можете выбирать цвет... ...любой цвет! Вы можете даже указывать размер подсказки! Большие подсказки... Любое количество подсказок для неограниченного количества элементов! Различные эффекты подсказок!

1.1. Описание qTip!

На первом месте заслужено находится qTip. Подсказки qTip поддерживают следующие возможности: ul, ul ul { list-style: none outside none; }.cartoon { background: url("qtip/owl.png") no-repeat scroll 50% 100% transparent; height: 126px; margin: 130px auto; text-align: center; width: 118px; }

поддержка всеми популярными браузерами - IE 6+,FF 2.0+, Opera 9.0+,Safari 3.0 +, Konqueror 3.5 + поддержка закруглённых углов; всплывающие подсказки передвигаются вместе с передвижением курсора; позиционирование индикатора; изменяемость стилей подсказки; подсказки не перекрывают друг друга при нахождении в стеке; установка эффектов отображения подсказок, подсказки могут плавно отображаться, при использовании соответствующих настроек; динамически загружаемое содержимое методом jquery ajax; поддержка изображений; поддержка видео от youTube; подробная документация на английском;

Для установки и использования qTip нам понадобятся два файла - jquery.qtip-1.0.0.min.js, jquery-1.3.2.min.js. Указанные файлы по умолчанию находятся в архиве на сайте разработчиков, однако, в дополнение к этим файлам Вы можете скачать дополнительные файлы – неминимизированные файлы js, так же на сайте разработчиков. Подключите указанные два файла во вновь созданной папке "qtip":

Код Чистый код   1.<script type="text/javascript" src="qtip/jquery.1.3.2.min.js"></script> 2.<script type="text/javascript" src="qtip/jquery.qtip-1.0.0.min.js"></script>

1.2. Структура и код qTip!

После подключения файлов создаётся HTML структура для каждой подсказки, не пугайтесь, Вам не придется работать с этой структурой, это всего лишь структура всплывающей подсказки (и нужна она лишь разработчикам):

Код Чистый код   1.<div class="qtip qtip-stylename"> 2. <div class="qtip-tip" rel="cornerValue"></div> 3. <div class="qtip-wrapper"> 4. <div class="qtip-borderTop"></div> // только для закруглённых углов 5. <div class="qtip-contentWrapper"> 6. <div class="qtip-title"> // CSS стили... 7. <div class="qtip-button"></div> 8. </div> 9. <div class="qtip-content"></div> 10. </div>11. <div class="qtip-borderBottom"></div> // только для закруглённых углов12. </div>13.</div>

1.3. Базовый пример qTip!

После того как мы подключили javascript библиотеки нужно использовать jQuery для создания подсказки, например в следующем примере для всех ссылок содержащих атрибут title будет создана всплывающая подсказка:

Код Чистый код   1.jQuery(function(){ 2.$('a[title]').qtip({ style: { 3. border: { 4. width: 3,  5. radius: 8,  6. color: '#6699CC' 7. },  8. tip: true } })  9.});

1.4. Объекты метода qtip

В метод qtip() допустимо передавать объекты, подробная информация о параметрах содержится на странице официального руководства. Объяснять все из них я не буду, ниже, Вы найдёте примеры применения данных объектов.

Show - объект, настраивающий параметры отображения подсказки Hide - объект, настраивающий параметры сокрытия подсказки Position - объект, настраивающий расположение подсказки; Content - объект, определяющий тип содержимого подсказки; Style - объект, отвечающий за стиль подсказки

1.5. Пример ajax qTip!

Подсказки qTip могут загружать контент через jquery ajax, для этого в параметре url укажите адрес загружаемой страницы и в следующем примере при наведении курсора на элемент с id ajaxtip будет выведена подсказка с удаленной страницы:

Код Чистый код   1.jQuery(function(){ 2.$("#ajaxtip").qtip({ 3. style: { 4. width:300,  5. border: { 6. width: 3,  7. radius: 8,  8. color: '#6699CC' 9. }10. },11. content: {12. url: 'qtip/localcontent.html'13. },14. position: { adjust: { screen: true } }15.});16.});

Пример 2. Праздность — корень всему злу, особливо военному человеку. - Подсказка с удаленной страницы!.

Обратите внимание на строку:

Код Чистый код   1.position: { adjust: { screen: true } }

она запрещает появление подсказки за пределами окна

Всего в метод qtip() передаются три объекта - style, content, position. Содержимое загружаемой страницы:

Код Чистый код   1.<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 2."http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 3.<html> 4.<head> 5.<meta http-equiv="Content-Type" content="text/html" charset="utf-8"> 6.</head> 7.<body> 8.<h3>Заголовок подсказки</h3> 9.<img src="qtip/qtip.png" style="float:left;"/>10.<p>Возненавидеть жизнь можно только вследствие апатии и лени.</p>11.<p>Прекращение деятельности всегда приводит за собой вялость, а за вялостью идет дряхлость.</p>12.</body>13.</html>

2. Подсказки TipTip!

Подсказки TipTip не требуют особых знаний jQuery, для их использования нужно подключить всего лишь следующие файлы:

Код Чистый код   1.<script src="../../jsfiles/jquery-1.5.min.js"></script> 2.<script src="jquery.tipTip.js"></script> 3.<link href="tipTip.css" rel="stylesheet" type="text/css" media="screen, projection" />

Сама подсказка TipTip создаётся следующим jQuery:

Код Чистый код   1.$(function(){ 2. $(".someClass").tipTip();  3.});

источник http://slyweb.ru/jquery/33.php