Автоматически всплывающие описания изображений на jquery. Набор полезных jQuery Ajax CSS3 фишек для веб-разработчиков. CSS3 jQuery всплывающие подсказки

В данной статье будет рассмотрено:

Надеюсь не нужно объяснять, что такие атрибуты как title, alt, часто бывают крайне необходимы. Ведь они помогают пользователям лучше ориентироваться в большом количестве информации и, к тому же, крайне полезны для поисковой оптимизации сайта. Единственная проблема с подсказками - они не могут быть изменены при помощи CSS стилей. Для решения этой проблемы задействуем возможности .

1. Создадим базовый каркас HTML файла, который содержит с атрибутом title.

Перечень ссылок:

• Главная
• О компании
• Контакты
• Портфолио

2. Теперь необходимо загрузить плагин qTip из репозитария.

3. Подключаем скаченные файлы:

// Стандартная библиотека jQuery //В этом файле будем прописывать jQuery скрипты

4. Для работы всплывающей подсказки достаточно прописать в scripts.js :

$(document).ready(function(){ $("a").qtip(); });

Эта конструкция означает, что для всех ссылок, у которых присутствует атрибут title будет применен метод qtip() .

1. Настраивать всплывающие подсказки можно по-разному. Для начала изменим позицию, с которой будут отображаться подсказки.

$("a").qtip({ position: { my: "bottom center", //Положение курсора at: "top center", //Положение всплывающей подсказки viewport: $(window) //Подсказка не будет вылизать за края экрана } });

2. После настройки позиции, можно заняться цветовой схемой отображения подсказки. По умолчанию в файле jquery.qtip.min.css содержатся следующие цветовые стили:

Qtip-default (желтый стиль по умолчанию)

Qtip-bootstrap

К некоторым из этих стилей можно добавить тень: qtip-shadow . К тому же, никто не мешает создать свой стиль, отлично сочетающийся с общим , хотя и стандартных более чем предостаточно.

$("a").qtip({ position: { my: "bottom center", at: "top center", viewport: $(window) }, style: { classes: "qtip-green qtip-shadow" } });

1. Для начала создадим HTML каркас :

• Home
• About
• Contact
• Our Work

#navigation { background: rgb(132,136,206); /* Old browsers */ background: -moz-linear-gradient(top, rgba(132,136,206,1) 0%, rgba(72,79,181,1) 50%, rgba(132,136,206,1) 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(132,136,206,1)), color-stop(50%,rgba(72,79,181,1)), color-stop(100%,rgba(132,136,206,1))); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, rgba(132,136,206,1) 0%,rgba(72,79,181,1) 50%,rgba(132,136,206,1) 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, rgba(132,136,206,1) 0%,rgba(72,79,181,1) 50%,rgba(132,136,206,1) 100%); /* Opera11.10+ */ background: -ms-linear-gradient(top, rgba(132,136,206,1) 0%,rgba(72,79,181,1) 50%,rgba(132,136,206,1) 100%); /* IE10+ */ filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#8488ce", endColorstr="#8488ce",GradientType=0); /* IE6-9 */ background: linear-gradient(top, rgba(132,136,206,1) 0%,rgba(72,79,181,1) 50%,rgba(132,136,206,1) 100%); /* W3C */ list-style-type: none; margin: 100px 20px 20px 20px; padding: 0; overflow: hidden; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; } #navigation li { margin: 0; padding: 0; display: block; float: left; border-right: 1px solid #4449a8; } #navigation a { color: #fff; border-right: 1px solid #8488ce; display: block; padding: 10px; } #navigation a:hover { background: #859900; border-right-color: #a3bb00; }

В результате должна получиться следующая картина:

3. В файл scripts.js добавим:

$("#navigation a").qtip({ position: { my: "top center", at: "bottom center", viewport: $(window) }, show: { effect: function(offset) { $(this).slideDown(300); } }, hide: { effect: function(offset) { $(this).slideUp(100); } }, style: { classes: "qtip-green qtip-shadow", } });

Теперь, при наведении курсора мыши на навигационное меню, будет отображаться всплывающая подсказка (атрибут title).

Кроме отображения стандартных тегов, во всплывающей подсказке можно отобразить и другой контент, например взятый из файла, из скрытого контейнера, или базы данных, причем без перезагрузки страницы при помощи Ajax технологии.

Эта ссылка берет контент из файла при помощи Ajax

Значение атрибута href=”tooltip.txt” означает, что гиперссылка ссылается на обычный txt файл.

$(".infobox").each(function(){ $(this).qtip({ content: { text: "Загрузка...", //Пока грузится контент, будет отображаться эта запись ajax: { url: $(this).attr("href") //Откуда брать контент }, title: { //Добавляет поле с заголовком в tooltip text: $(this).attr("title"), button: true //Добавляет кнопку для закрытия подсказки } }, position: { my: "top center", at: "bottom center", effect: false, //Убирает выезжающий эффект viewport: $(window) }, show: { event: "click", //Подсказка отобразиться при нажатии на ссылку, можно заменить на ‘hover’, тогда подсказка отобразиться при наведении solo: true //Позволяет отобразить только один tooltip на экране }, hide: "unfocus", //Подсказка закроется при клике по другому элементу страницы style: { classes: "qtip-green qtip-shadow" } }); }).bind("click", function(e){e.preventDefault()}); //При нажатии на ссылку браузер не будет загружать url

Данный Ajax прием работает только при запущенном сервере. Чтобы он заработал на локальном компьютере необходимо установить, к примеру, .

Пока не забыл, какие плюсы и минусы есть у радиаторов алюминиевых секционных и какие радиаторы обычно выберают потребители.

(cкачиваний: 409)

Подсказки играют очень важную роль в веб дизайне. С их помощью можно существенно повысить уровень удобства использования интерфейса. В данном уроке мы сделаем интерактивную карту с подсказками, которые будут выводиться при наведении курсора мыши на специальную метку.

Хочется сделать интерактивное изображение с метками, при наведении на которые будут выводиться подсказки. При этом структура должна быть простой в использовании и обновлении информации. Чтобы добавление новой метки не требовало от пользователя каких либо дизайнерских навыков. Просто нужно будет добавить в код элемент div с содержанием подсказки и установить для него атрибуты HTML5 data для позиционирования.

HTML5 имеет отличный инструмент - пользовательские атрибуты data , который позволяет хранить произвольный набор метаданных. Данный атрибут позволяет избежать использования атрибутов rel или title для различных задач в Javascript.

Синтаксис атрибута data имеет вид:

А в jQuery получить значение можно следующим образом:

Var test = $("div").data("foo");

В данном уроке атрибут data будет использоваться для хранения координат метки.

Северная Америка

• Площадь (кв.км): 24,490,000
• Население: 528,720,588

• #wrapper - данный элемент является контейнером для всех остальных элементов.
• img -изображение, которое будет служить фоном.
• .pin - абсолютно позиционируемый элемент, который содержит метку и содержание подсказки, которое будет выводиться обработчиком события. Класс pin-down определяет тип метки.
• data-xpos="450" data-ypos="110" - атрибут HTML5 data , который хранит координаты X (по горизонтали) и Y (по вертикали) в px для позиционирования метки. В данном примере метка будет располагаться на 450px от левой стороны изображения и на 110px сверху.

Код CSS достаточно простой и очевидный:

/* Относительное позиционирование */ #wrapper { position: relative; margin: 50px auto 20px auto; border: 1px solid #fafafa; -moz-box-shadow: 0 3px 3px rgba(0,0,0,.5); -webkit-box-shadow: 0 3px 3px rgba(0,0,0,.5); box-shadow: 0 3px 3px rgba(0,0,0,.5); } /* Скрываем оригинальное содержание подсказки */ .pin { display: none; } /* Стили для подсказкии и метки */ .tooltip-up, .tooltip-down { position: absolute; background: url(arrow-up-down.png); width: 36px; height: 52px; } .tooltip-down { background-position: 0 -52px; } .tooltip { display: none; width: 200px; cursor: help; text-shadow: 0 1px 0 #fff; position: absolute; top: 10px; left: 50%; z-index: 999; margin-left: -115px; padding:15px; color: #222; -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; -moz-box-shadow: 0 3px 0 rgba(0,0,0,.7); -webkit-box-shadow: 0 3px 0 rgba(0,0,0,.7); box-shadow: 0 3px 0 rgba(0,0,0,.7); background: #fff1d3; background: -webkit-gradient(linear, left top, left bottom, from(#fff1d3), to(#ffdb90)); background: -webkit-linear-gradient(top, #fff1d3, #ffdb90); background: -moz-linear-gradient(top, #fff1d3, #ffdb90); background: -ms-linear-gradient(top, #fff1d3, #ffdb90); background: -o-linear-gradient(top, #fff1d3, #ffdb90); background: linear-gradient(top, #fff1d3, #ffdb90); } .tooltip::after { content: ""; position: absolute; top: -10px; left: 50%; margin-left: -10px; border-bottom: 10px solid #fff1d3; border-left: 10px solid transparent; border-right:10px solid transparent; } .tooltip-down .tooltip { bottom: 12px; top: auto; } .tooltip-down .tooltip::after { bottom: -10px; top: auto; border-bottom: 0; border-top: 10px solid #ffdb90; } .tooltip h2 { font: bold 1.3em "Trebuchet MS", Tahoma, Arial; margin: 0 0 10px; } .tooltip ul { margin: 0; padding: 0; list-style: none; }

$(document).ready(function(){ // Устанавливаем ширину и высоту контейнера в соответствии с размерами изображения $("#wrapper").css({"width":$("#wrapper img").width(), "height":$("#wrapper img").height() }) //Направление символа подсказки var tooltipDirection; for (i=0; i