4069
- 1
Вот нашел еще один вид подсказок (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>Код:
$(document).ready(function(){
$('a[title]').qtip();
});5.Настройки
Код:
$('a[title]').qtip({
position: {
my: 'bottom center',
//Положение курсора
at: 'top center',
//Положение всплывающей подсказки
viewport: $(window)
//Подсказка не будет вылизать за края экрана
}
});подключим файл jquery.qtip.min.css файл main.tpl перед закрывающимся тегом /head:
Код:
<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. К тому же, никто не мешает создать свой стиль, отлично сочетающийся с общим дизайном сайта, хотя и стандартных более чем предостаточно.
Код:
$('a[title]').qtip({
position: {
my: 'bottom center',
at: 'top center',
viewport: $(window)
},
style: {
classes: 'qtip-green qtip-shadow'
}
});Вам только осталось в ссылках указать title="" и при наведении на ссылку она будет иметь Вот такой вид
поддержка всеми популярными браузерами - IE 7+,FF 6.0+, Opera 10.0+,Safari 5.0 +, Google Chrom (не проверял)
поддержка закруглённых углов;
всплывающие подсказки передвигаются вместе с передвижением курсора;
позиционирование индикатора;
изменяемость стилей подсказки;
подсказки не перекрывают друг друга при нахождении в стеке;
установка эффектов отображения подсказок, подсказки могут плавно отображаться, при использовании соответствующих настроек;
динамически загружаемое содержимое методом jquery ajax;
поддержка изображений;
поддержка видео от youTube;
подробная документация на английском;
Объекты метода qtip
В метод qtip() допустимо передавать объекты, подробная информация о параметрах содержится на странице официального руководства. Объяснять все из них я не буду, ниже, Вы найдёте примеры применения данных объектов.
Show - объект, настраивающий параметры отображения подсказки
Hide - объект, настраивающий параметры сокрытия подсказки
Position - объект, настраивающий расположение подсказки;
Content - объект, определяющий тип содержимого подсказки;
Style - объект, отвечающий за стиль подсказки
Можешь почитать и вот эту статейку "Запрещение доступа в конкретную директорию"
Это тоже интересно
Уважаемый посетитель, Вы зашли на сайт как незарегистрированный пользователь.
Мы рекомендуем Вам зарегистрироваться либо войти на сайт под своим именем.
Мы рекомендуем Вам зарегистрироваться либо войти на сайт под своим именем.
ответить