adsPlace_1

Войти или Зарегистрироваться

Hosting Ukraine

Better Tooltip. Всрлывающие подсказки на jQuery

Jon Cazier на днях написал очень симпатичный плагин к JQuery, предназначением которого является произведение благоприятного впечатления на неискушенных пользователей посредством всяческих всплываний и постепенных проявлений текста.

Конечно, в данное время ассортимент подобных плагинов достаточно обширен, но к этому творению, все-таки, предлагаю приглядеться повнимательнее.

Первый приятный момент – вес скрипта. В плагине всего 2,2 Кб и это не может не радовать.

Вторая приятность – авторское оформление всплывающей подсказки выглядит вполне прилично, так что – можно просто брать и использовать (что иногда бывает просто необходимо).

Ну и последнее – чистенький код плагина. Мелочь, а приятно ).

«Базовая комплектация» плагина представляет собой следующие файлы:

    jquery.betterTooltip.js – сам плагин
    style.css – файл стилей
    png-изображения в количестве 3-х (трёх) штук.

Естественно, еще нам понадобиться двигатель всего этого благолепия – JQuery, последнюю версию которого вы можете скачать на офсайте.

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

1. Подключаем стили

<link href="theme/style.css" rel="stylesheet" type="text/css" media="all" />

2. Подключаем JQuery

<script src="js/jquery-1.3.1.min.js" type="text/javascript"></script>

3. Подцепляем плагин

<script src="js/jquery.betterTooltip.js" type="text/javascript"></script>

4. Инициализируем плагин

<script type="text/javascript">
$(document).ready(function(){
	$('.tTip').betterTooltip({speed: 150, delay: 300});
});
</script>

В $(‘.tTip’)

указываем class или id элемента (элементов), title которого будет обработан плагином. Соответственно, таким элементом может являться все, что имеет title.

Например, это может быть:

<a class="tTip" title="Текст всплывающей подсказки" href="#">Ссылочка</a>

или вот:

<div class="tTip"   title="Текст всплывающей подсказки">Текст, по наведению на который будет появляться подсказка</div>

Как мы видим, у плагина даже есть пара настроек:

$('.tTip').betterTooltip({speed: 150, delay: 300})
  • Параметр `speed` – время, в течении которого появляется подсказка. Чем больше значение этого параметра, тем МЕНЬШЕ скорость появления.
  • Параметр `delay` – задержка появления подсказки. Чем больше параметр – тем больше времени будет проходить между наведением курсора на элемент и появлением подсказки

У меня пока все, удачных экспериментов!

Последние из рубрики

Комментарии(2)

  • Комментариев еще нет. Будь первым!

    Оставь свой отзыв

    Для вставки кода используйте кнопки php, html, javascript, css, sql

    * - поля обязательны к заполнению