Страница 1 из 11
Форум » Ucoz » Скрипты » Tipsy Tooltip Plugin (Всплывающей Подсказки)
Tipsy Tooltip Plugin
TicTac
Добавлено 14.07.2011 в 00:45 · Пост #1
Группа: Администраторы
Сообщений: 103
Данный плагин, имеет всего одно графическое PNG изображение и основной скрипт весом в 3 кб, плюс мы можем выбрать, с какой стороны установить всплывающею подсказку, сверху, справа, снизу, слева, лично мне понравился тот момент, что подсказка появляется мгновенно, без каких либо эффектов или анимации, можете взглянуть на Демо...



Установка:
1.Следует установить на страницу сайта, после тега:
[Table]body[/Table]
следующие скрипты:
Code
<script type="text/javascript" src="http://www.center-dm.ru/data/jQuery/Tipsy_Tooltip/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.Теперь в начало нашей ссылки, нам следует прописать класс, который будет отвечать за появление подсказки с той стороны, которая нам необходима. (север, юг,восток, запад).
Code
<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 стилях пропишем:
- изображение уголка
- установим прозрачность,
- выравним текст по центру
- установим значения для текста
- пропишем закруглённые углы
Code
.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;  
  }


Вот и всё, на мой взгляд самый большой плюс данного плагина заключается в том, что благодаря css стилям, мы можем его настроить на своё усмотрение, плюс нам не надо прописывать как это принято дополнительный тег <span>, в котором находиться текст подсказки, в данном решении используется текст параметра title, даже при большом количестве текста, подсказка смотрится как надо .







 

Форум » Ucoz » Скрипты » Tipsy Tooltip Plugin (Всплывающей Подсказки)
Страница 1 из 11
Поиск:


Copyright UWinSoft © 2011
Хостинг от uCoz
Хостинг от uCoz