| TicTac | Добавлено 14.07.2011 в 00:45 · Пост #1 |
Группа: Администраторы
Сообщений: 103
| Награды: 3 + |
| Репутация: 69 ± |
| Данный плагин, имеет всего одно графическое 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, даже при большом количестве текста, подсказка смотрится как надо .
|
| |
| |
