Главная » Файлы » Скрипты для uCoz » Хинты |
Tipsy подсказка by jquery.com для uCoz
24.06.14, 10:13:29 | |
Данный плагин, имеет всего одно графическое PNG изображение и основной скрипт весом в 3 кб, плюс мы можем выбрать, с какой стороны установить всплывающею подсказку, сверху, справа, снизу, слева, лично мне понравился тот момент, что подсказка появляется мгновенно, без каких либо эффектов или анимации.. Кстати, почти аналогичен apo-подсказкам на форуме ДЕМО Установка: Шаг-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/ | |
Просмотров: 471 | Загрузок: 0 | |
Всего комментариев: 0 | |
| |