Slyweb
На разработку сайта! Скидки 50%!

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

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

Оглавление статьи "Всплывающие подсказки jQuery!"

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

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

На первом месте заслужено находится qTip. Подсказки qTip поддерживают следующие возможности:

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

Для установки и использования 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. Наведите курсор на эту подсказку - Подсказка 1..

Пример 2. Вечная подсказка - Подсказка 2..

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

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

  1. Show - объект, настраивающий параметры отображения подсказки
  2. Hide - объект, настраивающий параметры сокрытия подсказки
  3. Position - объект, настраивающий расположение подсказки;
  4. Content - объект, определяющий тип содержимого подсказки;
  5. 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>

        

1.6. Загрузить qTip архивом

Загрузить qTip архивом

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.});

        

Пример 3. Подсказки TipTip. - наведите здесь курсор - "Подсказка"..

Загрузить TipTip архивом

3. jQuery tools ToolTip!

Менее интересный пример всплывающей подсказки - пример 4.

4. Simple TIP!

Подсказка - пример 4.

5. Дополнительные всплывающие подсказки!

Менее интересные подсказки, которые могут Вас заинтересовать:

Заключение

Просьба всех интересующихся jQuery сообщать о новых подсказках на jQuery в комментариях.


Александр Ермаков