Вот нашел еще один вид подсказок (Tooltips) qTip,это самый простой способ создания подсказок с помощью jQuery и qTip на мой взгляд ,если устанавливать на готовый или рабочий сайт.
Итак приступим
1.Для установки и использования qTip нам понадобится jQuery ,но он уже обычно подключен.
2.Скачиваем архив Вы не можете скачивать файлы с нашего сайта ,рекомендуем Вам зарегистрироваться либо войти на сайт под своим именем.
,распаковываем и заливаем В папку с вашим шаблоном файлы jquery.qtip.min.js и scripts.js в директорию js, а файл стиля jquery.qtip.min.css в папку css.
3. Подключаем скрипты в вашем шаблоне в файле main.tpl перед закрывающимся тегом /head:
1 | <script src="{{ tpl_url }}/js/jquery.qtip.min.js"></script> |
1 | <script src="{{ tpl_url }}/js/scripts.js"></script> |
1 | $(document).ready(function(){ |
2 | $('a[title]').qtip(); |
3 | }); |
5.Настройки
01 | $('a[title]').qtip({ |
02 | position: { |
03 | my: 'bottom center', |
04 | //Положение курсора |
05 |
06 | at: 'top center', |
07 | //Положение всплывающей подсказки |
08 |
09 | viewport: $(window) |
10 | //Подсказка не будет вылизать за края экрана |
11 |
12 | } |
13 | }); |
подключим файл jquery.qtip.min.css файл main.tpl перед закрывающимся тегом /head:
1 | <link rel="stylesheet" href="{{ tpl_url }}/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. К тому же, никто не мешает создать свой стиль, отлично сочетающийся с общим дизайном сайта, хотя и стандартных более чем предостаточно.
01 | $('a[title]').qtip({ |
02 | position: { |
03 | my: 'bottom center', |
04 | at: 'top center', |
05 | viewport: $(window) |
06 | }, |
07 | style: { |
08 | classes: 'qtip-green qtip-shadow' |
09 | } |
10 | }); |
Вам только осталось в ссылках указать title="" и при наведении на ссылку она будет иметь Вот такой вид
поддержка всеми популярными браузерами - IE 7+,FF 6.0+, Opera 10.0+,Safari 5.0 +, Google Chrom (не проверял)
поддержка закруглённых углов;
всплывающие подсказки передвигаются вместе с передвижением курсора;
позиционирование индикатора;
изменяемость стилей подсказки;
подсказки не перекрывают друг друга при нахождении в стеке;
установка эффектов отображения подсказок, подсказки могут плавно отображаться, при использовании соответствующих настроек;
динамически загружаемое содержимое методом jquery ajax;
поддержка изображений;
поддержка видео от youTube;
подробная документация на английском;
Объекты метода qtip
В метод qtip() допустимо передавать объекты, подробная информация о параметрах содержится на странице официального руководства. Объяснять все из них я не буду, ниже, Вы найдёте примеры применения данных объектов.
Show - объект, настраивающий параметры отображения подсказки
Hide - объект, настраивающий параметры сокрытия подсказки
Position - объект, настраивающий расположение подсказки;
Content - объект, определяющий тип содержимого подсказки;
Style - объект, отвечающий за стиль подсказки
Можешь почитать и вот эту статейку "Падающий снег на сайт на css и js"
Это тоже интересно
Мы рекомендуем Вам зарегистрироваться либо войти на сайт под своим именем.
ответить