Главная » Файлы » Скрипты для uCoz » Хинты

Tipsy подсказка by jquery.com для uCoz
24.06.14, 10:13:29

Скачать файл





Данный плагин, имеет всего одно графическое PNG изображение и основной скрипт весом в 3 кб, плюс мы можем выбрать, с какой стороны установить всплывающею подсказку, сверху, справа, снизу, слева, лично мне понравился тот момент, что подсказка появляется мгновенно, без каких либо эффектов или анимации..
Кстати, почти аналогичен apo-подсказкам на форуме smile
ДЕМО

Установка:

Шаг-1 JS:
Следует установить на страницу сайта, после тега body, следующие скрипты:
Код
<script type="text/javascript" src="ajax/jquery.tipsy.js"></script>  
  <script type='text/javascript'>  
  $(function() {  
  $('.north').tipsy({gravity: 'n'});  
  $('.south').tipsy({gravity: 's'});  
  $('.east').tipsy({gravity: 'e'});  
  $('.west').tipsy({gravity: 'w'});  
  });  
  </script>


Шаг-2 Html:
Теперь в начало нашей ссылки, нам следует прописать класс, который будет отвечать за появление подсказки с той стороны, которая нам необходима. (север, юг,восток, запад).
Код
<a class='north' href='#' title='Подсказка появляется снизу (Север)'>North | Север</a>  
  <a class='south' href='#' title='Подсказка появляется сверху (Юг)'>South | Юг</a>  
  <a class='east' href='#' title='Подсказка появляется слева (Восток)'>East | Восток</a>  
  <a class='west' href='#' title='Подсказка появляется справа (Запад)'>West | Запад</a>


Шаг-3 CSS:
Теперь в css стилях пропишем:
- изображение уголка
- установим прозрачность,
- выравним текст по центру
- установим значения для текста
- пропишем закруглённые углы
Код
.tipsy {  
  padding: 5px;  
  font-size: 11px;  
  opacity: 0.8;  
  filter: alpha(opacity=80);  
  background-repeat: no-repeat;  
  background-image: url('tipsy.gif');  
  }  

  .tipsy-inner {  
  padding: 5px 8px 4px 8px;  
  background-color: black;  
  color: white;  
  max-width: 200px;  
  text-align: center;  
  }  

  .tipsy-inner {  
  -moz-border-radius:3px;  
  -webkit-border-radius:3px;  
  }  

  .tipsy-north {  
  background-position: top center;  
  }  

  .tipsy-south {  
  background-position: bottom center;  
  }  

  .tipsy-east {  
  background-position: right center;  
  }  

  .tipsy-west {  
  background-position: left center;  
  }


Из архива извлекаем папку ajax и заливаем ее в корень сайта. Демо версия находится в архиве.

Материал подготовлен: GrandDooM
Источник: http://jquery.com/

Категория: Хинты | Добавил: Apocalypse | Теги: Tipsy, ucoz, подсказка, by, jquery.com, для
Просмотров: 361 | Загрузок: 0 | Рейтинг: 0.0/0
Всего комментариев: 0
Имя *:
Email: