Artinblog logo
  • DLE
    • Шаблоны
    • Модули
  • SEO
    • SEO для начинающих
  • Общество
  • jQuery
  • Дизайн
  • Услуги
Главная » jQuery » Всплывающие подсказки при помощи jQuery qTip RSS
дек 25 2012 photo

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

admin 132 354
  • 80
  • 1
  • 2
  • 3
  • 4
  • 5

Всплывающие подсказки - 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. Настраивать всплывающие подсказки можно по-разному. Для начала изменим позицию, с которой будут отображаться подсказки.

 

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

 

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



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

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

 

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

 

- qtip-light

 

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

 

- qtip-dark

 

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

 

- qtip-red

 

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

 

- qtip-green

 

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

 

- qtip-blue

 

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

 

- qtip-youtube

 

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

 

- qtip-jtools

 

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

 

- qtip-cluetip

 

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

 

- qtip-tipsy

 

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

 

- qtip-tipped

 

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

 

- qtip-bootstrap

 

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


К некоторым из этих стилей можно добавить тень: 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;
}

 

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

 

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


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.

 

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

 

Демо qTip.rar [42,04 Kb] (cкачиваний: 433)

Теги: jQuery qTip tooltip всплывающие подсказки

HashFlare
Другие новости по теме:
  • Как закрыть ссылку от индексации при помощи javascript
  • Всплывающее окно jquery на сайте
  • 10 новых jQuery плагинов 2014 года
  • Красивое вертикальное меню на CSS
  • Горизонтальное меню на CSS

Комментарии к: Всплывающие подсказки при помощи jQuery qTip (129)

    1. №121  Гость MadieHarvey 05-02-2022 Цитировать
      I'm curious to find out what blog platform you have been working with? I'm experiencing some small security problems with my latest site and I'd like to find something more safeguarded. Do you have any recommendations?
    1. №122  Гость MadieHarvey 06-02-2022 Цитировать
      Thanks for finally talking about >        jQuery qTip.  ? <Liked it!
    1. №123  Гость LeonelNdz221659 07-02-2022 Цитировать
      The roof is one of the most important safety features for the stability of a home during unfavorable weather. If the cracks are too large, you will need to replace the flashing and anything else that is involved, such as grommets or moldings. Roofers should also have liability insurance and an up to date worker's comp certificate.
    1. №124  Гость LeonelNdz221659 07-02-2022 Цитировать
      If doing this roof job on your own is too hard it might be worth it to call in a professional repair team who is prepared to bring in all the tools you need and the honed expertise in completing the repair for you. Repairing leaking roofs is one of the most common DIY activities. The stress factor is relieved from you, as your decision will be only to determine which the most favorable estimate for your needs.
    1. №125  Гость MadieHarvey 07-02-2022 Цитировать
      This is my first time go to see at here and i am genuinely impressed to read everthing at single place.
    1. №126  Гость LeonelNdz221659 07-02-2022 Цитировать
      Homeowners who decide to undergo a strategic default are often guided through the process by companies such as You - Walk - Away. Repairing leaking roofs is one of the most common DIY activities. Defend your dwelling by keeping the roof in very good restore.
    1. №127  Гость MadieHarvey 08-02-2022 Цитировать
      What's up, its pleasant article concerning media print, we all be aware of media is a impressive source of data.
    1. №128  Elizbeth 03-10-2022 Цитировать
      Have you ever earned $765 just within 5 minutes? trade binary options
    1. №129  Wahibah 04-03-2025 Цитировать
      Howdy! My family name is Wahibah. What i'm a legal pertaining content material article author. You should browse my personal superbly written articles; Check out my homepage; Traffic Ticket Law Firm Seo Agency
1 2 3 4 5
Имя:*
Комментарий:
Сервис не доступен
Похожие статьи:
  • Как закрыть ссылку от индексации при помощи javascript
  • Всплывающее окно jquery на сайте
  • 10 новых jQuery плагинов 2014 года
  • Красивое вертикальное меню на CSS
  • Горизонтальное меню на CSS
  • Популярное
  • Авторизация
Войти
Забыли? Регистрация
HashFlare
  • Обратная связь
  • Карта сайта
При копировании материалов ссылка на источник Artinblog.ru обязательна. Copyright © 2012 - 2015