Jon Cazier на днях написал очень симпатичный плагин к JQuery, предназначением которого является произведение благоприятного впечатления на неискушенных пользователей посредством всяческих всплываний и постепенных проявлений текста. Конечно, в данное время ассортимент подобных плагинов достаточно обширен, но к этому творению, все-таки, предлагаю приглядеться повнимательнее.
Первый приятный момент – вес скрипта. В плагине всего 2,2 Кб и это не может не радовать.
Вторая приятность – авторское оформление всплывающей подсказки выглядит вполне прилично, так что – можно просто брать и использовать (что иногда бывает просто необходимо).
Ну и последнее – чистенький код плагина. Мелочь, а приятно ).
«Базовая комплектация» плагина представляет собой следующие файлы:
Естественно, еще нам понадобиться двигатель всего этого благолепия – 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}); |
Все это в действии можно посмотреть вот здесь.
А здесь архив с демонстрационными материалами.
У меня пока все, удачных экспериментов!
Приветствую! Я Чернова Ирина, автор этого блога. Здесь я пытаюсь писать о том, что в наибольшей степени меня интересует, а именно - веб-разработках и управлении ими. 
Блогово Зайсла © 2009 
 |
|
Спасибо !
Спасибо. Уверен пригодится.)
Да, jQuery теперь не использует только ленивый. Но я бы делал тултип используя CSS, прописывая тегу событие на :hover, то есть display:none сменить на display:block, и абсолютное позиционирование.
2 Anstak, да, так можно, но IE не любит св-во hover у не-ссылок. И такой симпатичной анимации не получается… В итоге для IE приходится делать костыли на JS, а проще – jQuery.
в ie6 не работает прозрачноть, и получается уродство
2artem, для этого есть море пнг-фиксов.
2автоор, скрипт не работает если применять к тегу …
*к тегу area
То, что не работает прозрачнось в IE6 это не беда плагина, а беда браузера. Плагин хороший,но все же лучше использовать без прозрачности.