Всплывающие подсказки при помощи jQuery qTip
Браузеры автоматически создают всплывающие подсказки, когда веб-мастера прописывают в атрибут title какой-либо текст (как правило, атрибут title применяется к тегам <a> и <img>, т.е. к ссылкам и изображениям). Когда пользователи наводят курсором мыши на теги, в которых присутствует атрибут title, то браузер отображает всплывающую подсказку. Именно такие всплывающие подсказки (tooltip) мы и будем редактировать.
В данной статье будет рассмотрено:
- как использовать плагин qTip для замены стандартных всплывающих подсказок
- как настроить qTip tooltips
- как создать навигационное меню при помощи qTip
- как отобразить Ajax контент во всплывающей подсказке
Простые пользовательские текстовые всплывающие подсказки
Надеюсь не нужно объяснять, что такие атрибуты как title, alt, часто бывают крайне необходимы. Ведь они помогают пользователям лучше ориентироваться в большом количестве информации и, к тому же, крайне полезны для поисковой оптимизации сайта. Единственная проблема с подсказками – они не могут быть изменены при помощи CSS стилей. Для решения этой проблемы задействуем возможности jQuery.
1. Создадим базовый каркас HTML файла, который содержит ссылки с атрибутом title.
<p>Перечень ссылок:</p>
<ul>
<li><a href="home.html" title="Заголовок домашней страницы">Главная</a></li>
<li><a href="about.html" title="Познакомьтесь лучше с нашей компанией">О компании</a></li>
<li><a href="contact.html" title="Отправьте нам сообщение!">Контакты</a></li>
<li><a href="work.html" title="Изучите наше портфолио">Портфолио</a></li>
</ul>
2. Теперь необходимо загрузить плагин qTip из GitHub репозитария.
3. Подключаем скаченные файлы:
<head>
<script src="jquery.js"></script>// Стандартная библиотека jQuery
<script src="jquery.qtip.min.js"></script>
<script src="scripts.js"></script>//В этом файле будем прописывать jQuery скрипты
<link rel="stylesheet" type="text/css" href="jquery.qtip.min.css">
</head>
4. Для работы всплывающей подсказки достаточно прописать в scripts.js:
$(document).ready(function(){
$('a[title]').qtip();
});
Эта конструкция означает, что для всех ссылок, у которых присутствует атрибут title будет применен метод qtip().
Настройка jQuery qTip
1. Настраивать всплывающие подсказки можно по-разному. Для начала изменим позицию, с которой будут отображаться подсказки.
$('a[title]').qtip({
position: {
my: 'bottom center', //Положение курсора
at: 'top center', //Положение всплывающей подсказки
viewport: $(window) //Подсказка не будет вылизать за края экрана
}
});
2. После настройки позиции, можно заняться цветовой схемой отображения подсказки. По умолчанию в файле jquery.qtip.min.css содержатся следующие цветовые стили:
- qtip-default (желтый стиль по умолчанию)
- qtip-light
- qtip-dark
- qtip-red
- qtip-green
- qtip-blue
- qtip-youtube
- qtip-jtools
- qtip-cluetip
- qtip-tipsy
- qtip-tipped
- qtip-bootstrap
К некоторым из этих стилей можно добавить тень: qtip-shadow. К тому же, никто не мешает создать свой стиль, отлично сочетающийся с общим дизайном сайта, хотя и стандартных более чем предостаточно.
$('a[title]').qtip({
position: {
my: 'bottom center',
at: 'top center',
viewport: $(window)
},
style: {
classes: 'qtip-green qtip-shadow'
}
});
Создание навигационного меню с всплывающимися подсказками
1. Для начала создадим HTML каркас навигационного меню:
<ul id="navigation">
<li><a href="home.html" title="Главная страница">Home</a></li>
<li><a href="about.html" title="О компании">About</a></li>
<li><a href="contact.html" title="Обратная связь">Contact</a></li>
<li><a href="work.html" title="Наше портфолио">Our Work</a></li>
</ul>
2. Далее добавим некоторые CSS стили в styles.css и подключим нашу таблицу стилей:
#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 технологии.
1. Вначале создаем ссылку и присваиваем ей класс:
<a href="tooltip.txt" class="infobox" title="ToolTip">Эта ссылка берет контент из файла при помощи Ajax</a>
Значение атрибута href=”tooltip.txt” означает, что гиперссылка ссылается на обычный txt файл.
2. Далее добавим в scripts.js следующее:
$('.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 прием работает только при запущенном сервере. Чтобы он заработал на локальном компьютере необходимо установить, к примеру, Denwer.
Пока не забыл, какие плюсы и минусы есть у радиаторов алюминиевых секционных и какие радиаторы обычно выберают потребители.
