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

Опубликовано admin - вт, 03/08/2011 - 15:34

Обзор всплывающих подсказок на 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.jsjquery-1.3.2.min.js. Указанные файлы по умолчанию находятся в архиве на сайте разработчиков, однако, в дополнение к этим файлам Вы можете скачать дополнительные файлы – неминимизированные файлы js, так же на сайте разработчиков. Подключите указанные два файла во вновь созданной папке "qtip":

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

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

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

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

Пример 1. Наведите курсор на эту подсказку - Подсказка 1..

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

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

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

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

5. Пример ajax qTip!

Подсказки qTip могут загружать контент через jquery ajax, для этого

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

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

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

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

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

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

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

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

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

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

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

3. jQuery tools ToolTip!

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

4. Simple TIP!

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

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

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

Заключение

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

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