Главная » Файлы » Прочие скрипты » jQuery
NexTooltip v0.8 - удобные подсказки для uCoz (обновлено)
24.06.14, 09:43:57

Скачать файл



Часто просят рассказать да показать как сделать подсказки с картинками или, что бы они появлялись сразу, ну и т.п.

Так вот это моя первая разработка, пока очень слабенькая, но планирую усовершенствовать её.

Заранее хочу выразить благодарность Soh Tanaka, по гайду которого(ой) я это написал.


Демо

Установка:

1) В head или в css таблицу вставляем:
Код
<style>  
.tip {  
color: #fff;  
background:#1d1d1d;  
display:none;  
padding:20px;  
position:absolute;  
z-index:1000;  
-webkit-border-radius: 3px;  
-moz-border-radius: 3px;  
border-radius: 8px;  
opacity: 0.8;  
}  
.tip-c {  
color: #fff;  
background:#1d1d1d;  
display:none;  
padding:20px;  
position:absolute;  
z-index:1000;  
-webkit-border-radius: 3px;  
-moz-border-radius: 3px;  
border-radius: 8px;  
opacity: 0.8;  
}  
.str-c {  
display:none;  
position:absolute;  
z-index:1000;  
opacity: 0.8;  
}  
.str {  
display:none;  
position:absolute;  
z-index:1000;  
opacity: 0.8;  
}  
</style>


Это непосредственно стиль самой подсказки, тут всё ограниченно вашей фантазией и познаниями. По умолчанию подсказка чёрная.

tip - стиль hover'a, tip-c - стиль click'ера, str и str-с - стиль стрелочек, не рекомендую менять в них ничего кроме прозрачности и z-index.

2) В самый низ страницы, как можно ниже, но перед :
Код
<span class=tip></span><span class=tip-c></span><span class="str"></span><span class="str-c"></span>  
<script>  
//NexTooltip v0.8 By Nexon, Специально для www.apo-ucoz.com
// Настройки  
var pokaz = 'fade'; // fade - показывать плавно, show - показывать без анимации.  
var otstup = 15; // отступ подсказки от элемента  
var strelka = 1; // 1 - показывать указатель, 0 - не показывать.  
var strcolor = '#1d1d1d'; // цвет стрелки.  
var nexclouseclick = 1; // закрывать кликеры щелчком по подсказке, 1 - да, 0 -нет.  
//NexTooltip v0.8 By Nexon, Специально для www.apo-ucoz.com
</script>  
<script type="text/javascript" src="/js/NexTooltip.js"></script>


Это настройки и сам скрипт. Настройки уже имеют комментарии, думаю разберётесь, ну если что спрашивайте smile

3) Подсказку можно подключать к абсолютно любому объекту, для этого необходимо дать объекту нужный класс и в параметре tip написать текст подсказки (поддерживает HTML теги, но не скрипты). Основные параметры вывода подсказки задаются классом.

Перечень всех типов:
nex-hover - это обычная подсказка, выводится при наведении привязывается к курсору.
nex-hover-right - выводится при наведении справа от объекта.
nex-hover-left - выводится при наведении слева от объекта.
nex-hover-top - выводится при наведении сверху от объекта.
nex-hover-bottom - выводится при наведении снизу от объекта.

nex-click-right - выводится при клике справа от объекта.
nex-click-left - выводится при клике слева от объекта.
nex-click-top - выводится при клике сверху от объекта.
nex-click-bottom - выводится при клике снизу от объекта.

Примеры:

Обычная подсказка
Код
<img src="любая картинка" class="nex-hover" tip="Подсказка">


Hover справа
Код
<span class="nex-hover-right" tip="Подсказка">Текст</span>


Необходим jQuery версии 1.6.1

Скаченный файл загрузить на сайт в папку js.
Копирайт не подтираем.

Надеюсь вам понравится smile

P.S.: Если в настройках nexclouseclick задать как 0, то ваши кликеры не будут закрываться, так вот чтобы закрывать их через кнопку, нужно в tip, то есть в код подсказки, поместите вот такую ссылку:
Код
<a href=javascript:// onclick=$('.tip-c').fadeOut();$('.str-c').fadeOut();>Закрыть</a>

Категория: jQuery | Добавил: Apocalypse | Теги: v0.8, NexTooltip, ucoz, подсказки, удобные, (обновлено), для
Просмотров: 506 | Загрузок: 0 | Рейтинг: 0.0/0
Всего комментариев: 0
Имя *:
Email: