Jon Cazier на днях написал очень симпатичный плагин к JQuery, предназначением которого является произведение благоприятного впечатления на неискушенных пользователей посредством всяческих всплываний и постепенных проявлений текста. Конечно, в данное время ассортимент подобных плагинов достаточно обширен, но к этому творению, все-таки, предлагаю приглядеться повнимательнее.
Первый приятный момент – вес скрипта. В плагине всего 2,2 Кб и это не может не радовать.
Вторая приятность - авторское оформление всплывающей подсказки выглядит вполне прилично, так что – можно просто брать и использовать (что иногда бывает просто необходимо).
Ну и последнее – чистенький код плагина. Мелочь, а приятно ).
«Базовая комплектация» плагина представляет собой следующие файлы:
- jquery.betterTooltip.js – сам плагин
- style.css – файл стилей
- png-изображения в количестве 3-ч (трёх) штук.
Естественно, еще нам понадобиться двигатель всего этого благолепия – JQuery, последнюю версию которого вы можете скачать на офсайте.
Теперь посмотрим, как, собственно, заставить эту штуку работать.
1. Подключаем стили
1 | <link href="theme/style.css" rel="stylesheet" type="text/css" media="all" /> |
2. Подключаем JQuery
1 | <script src="js/jquery-1.3.1.min.js" type="text/javascript"></script> |
3. Подцепляем плагин
1 | <script src="js/jquery.betterTooltip.js" type="text/javascript"></script> |
4. Инициализируем плагин
1 2 3 4 5 | <script type="text/javascript"> $(document).ready(function(){ $('.tTip').betterTooltip({speed: 150, delay: 300}); }); </script> |
В
1 | $('.tTip') |
указываем class или id элемента (элементов), title которого будет обработан плагином. Соответственно, таким элементом может являться все, что имеет title.
Например, это может быть:
1 | <a class="tTip" title="Текст всплывающей подсказки" href="#">Ссылочка</a> |
или вот:
1 | <div class="tTip" title="Текст всплывающей подсказки">Текст, по наведению на который будет появляться подсказка</div> |
Как мы видим, у плагина даже есть пара настроек:
1 | $('.tTip').betterTooltip({speed: 150, delay: 300}); |
- Параметр `speed` - время, в течении которого появляется подсказка. Чем больше значение этого параметра, тем МЕНЬШЕ скорость появления.
- Параметр `delay` - задержка появления подсказки. Чем больше параметр – тем больше времени будет проходить между наведением курсора на элемент и появлением подсказки
Все это в действии можно посмотреть вот здесь.
А здесь архив с демонстрационными материалами.
У меня пока все, удачных экспериментов!
Здесь можно оставить свои комментарии. Выпуск подготовленплагином wordpress для subscribe.ru
Сообщения
0 коммент.
Отправить комментарий