Хаки и Скрипты Next Generation CMS : Tooltips : Подсказки qTip

irbees2008 Опубликовано - 20 - сентября Tooltips

Адаптировал: irbees2008
Источник:
Уровень сложности исполнения: это делается простым копированием и нажиманием кнопки
Демо:

Вот нашел еще один вид подсказок (Tooltips) qTip,это самый простой способ создания подсказок с помощью jQuery и qTip на мой взгляд ,если устанавливать на готовый или рабочий сайт.
Итак приступим
1.Для установки и использования qTip нам понадобится jQuery ,но он уже обычно подключен.
2.Скачиваем архив Вы не можете скачивать файлы с нашего сайта ,рекомендуем Вам зарегистрироваться либо войти на сайт под своим именем. ,распаковываем и заливаем В папку с вашим шаблоном файлы jquery.qtip.min.js и scripts.js в директорию js, а файл стиля jquery.qtip.min.css в папку css.
3. Подключаем скрипты в вашем шаблоне в файле main.tpl перед закрывающимся тегом /head:

Код:

<script  src="{{ tpl_url }}/js/jquery.qtip.min.js"></script>

после него, ниже добавить

Код:

<script src="{{ tpl_url }}/js/scripts.js"></script>

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

Код:

$(document).ready(function(){
      $('a[title]').qtip();
});

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

Код:

$('a[title]').qtip({
   position: {
      my: 'bottom center', 
//Положение курсора

      at: 'top center', 
//Положение всплывающей подсказки

      viewport: $(window) 
//Подсказка не будет вылизать за края экрана

   }
});

6.Вот настроили позиции, теперь займемся цветовой схемой отображения подсказки.
подключим файл jquery.qtip.min.css файл main.tpl перед закрывающимся тегом /head:

Код:

<link rel="stylesheet"  href="{{ tpl_url }}/css/jquery.qtip.min.css">

По умолчанию в файле 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'
   }
});

4.Ну вот и все!
Вам только осталось в ссылках указать title="" и при наведении на ссылку она будет иметь Вот такой вид
поддержка всеми популярными браузерами - IE 7+,FF 6.0+, Opera 10.0+,Safari 5.0 +, Google Chrom (не проверял)
поддержка закруглённых углов;
всплывающие подсказки передвигаются вместе с передвижением курсора;
позиционирование индикатора;
изменяемость стилей подсказки;
подсказки не перекрывают друг друга при нахождении в стеке;
установка эффектов отображения подсказок, подсказки могут плавно отображаться, при использовании соответствующих настроек;
динамически загружаемое содержимое методом jquery ajax;
поддержка изображений;
поддержка видео от youTube;
подробная документация на английском;

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

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

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

Можешь почитать и вот эту статейку "Линии"

Это тоже интересно

irbees2008 25.09.2015 - 03:49

http//ngcmshak.ru/uploads/images/default/8001_1356451374_qtip-red.jpg

ответить

Уважаемый посетитель, Вы зашли на сайт как незарегистрированный пользователь.
Мы рекомендуем Вам зарегистрироваться либо войти на сайт под своим именем.