Обзор всплывающих подсказок на jQuery. Наверху самые лучшие, в низу - простые, не имеющие дополнительных возможностей, кроме как отображения текста! Для всех подсказок лучше, чем здесь - просьба указывать их адрес в комментариях! В низу страницы указан список всех найденных автором всплывающих подсказок на jQuery, которые в некоторых случаях могут пригодиться Вам.
Оглавление статьи "Всплывающие подсказки jQuery!"
- 1. Подсказки qTip!
- 2. Для тех, кто не любит сложностей - подсказки TipTip!
- 3. jQuery tools ToolTip!
- 4. Simple TIP!
- 5. Дополнительные всплывающие подсказки!
- Заключение!
1. Подсказки qTip!
1.1. Описание qTip!
На первом месте заслужено находится qTip. Подсказки qTip поддерживают следующие возможности:
- поддержка всеми популярными браузерами - 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.2. Структура и код qTip!
После подключения файлов создаётся HTML структура для каждой подсказки, не пугайтесь, Вам не придется работать с этой структурой, это всего лишь структура всплывающей подсказки (и нужна она лишь разработчикам):
1.3. Базовый пример qTip!
После того как мы подключили javascript библиотеки нужно использовать jQuery для создания подсказки, например в следующем примере для всех ссылок содержащих атрибут title будет создана всплывающая подсказка:
Пример 1. Наведите курсор на эту подсказку - Подсказка 1..
Пример 2. Вечная подсказка - Подсказка 2.
1.4. Объекты метода qtip
В метод qtip() допустимо передавать объекты, подробная информация о параметрах содержится на странице официального руководства. Объяснять все из них я не буду, ниже, Вы найдёте примеры применения данных объектов.
- Show - объект, настраивающий параметры отображения подсказки
- Hide - объект, настраивающий параметры сокрытия подсказки
- Position - объект, настраивающий расположение подсказки;
- Content - объект, определяющий тип содержимого подсказки;
- Style - объект, отвечающий за стиль подсказки
5. Пример ajax qTip!
Подсказки qTip могут загружать контент через jquery ajax, для этого
Пример 2. Праздность — корень всему злу, особливо военному человеку. - Подсказка с удаленной страницы!.
Обратите внимание на строку:
она запрещает появление подсказки за пределами окна
Всего в метод qtip() передаются три объекта - style, content, position. Содержимое загружаемой страницы:
2. Подсказки TipTip!
Подсказки TipTip не требуют особых знаний jQuery, для их использования нужно подключить всего лишь следующие файлы:
Сама подсказка TipTip создаётся следующим jQuery:
Пример 3. Подсказки TipTip. - наведите здесь курсор - "Подсказка"..
3. jQuery tools ToolTip!
Менее интересный пример всплывающей подсказки - пример 4.
4. Simple TIP!
Подсказка - пример 4.
5. Дополнительные всплывающие подсказки!
Менее интересные подсказки, которые могут Вас заинтересовать:
Заключение
Просьба всех интересующихся jQuery сообщать о новых подсказках на jQuery в комментариях.
342 просмотра
Взаимосвязанные материалы
Сайт slyweb.ru содержит многочисленную информацию о разработке сайтов и их поддержки в рабочем состоянии.
На сегодняшний день slyweb.ru представляет следующие услуги:
читать...Возможно рано или поздно Вам придётся писать серьёзные скрипты на jQuery, поскольку jQuery наиболее популярен в последнее время.
читать...Возможно Вам интересно спросить: "Почему у меня возникла мысль написать подробное мини-руководство об ajax на jQuery?".
читать...Здравствуйте уважаемые читатели, продолжаем цикл статей о самом нужном в jQuery. Сегодня я научу Вас делать jQuery карусель.
читать...Сегодня я расскажу как сделать интересный вариант плеера на основе html 5 и jQuery.
Плеер будет поддерживать следующие функции:
читать...