Реальный пиарJavaScriptJquery → jQuery EasyTooltip plugin

jQuery EasyTooltip plugin

jquery примеры

Сразу объясню, что сподвигло меня писать собственный плагин для jquery, когда уже давно есть несколько готовых.

Во-первых, это мое стремление к простоте и красоте ибо они спасут мир, а когда я взглянул на исходный код нескольких существующих, то понял, что спасать мир придется долго. Усугубило положение зависимость многих из них от других плагинов (таких как bgiframe и delegate)

Во-вторых, это невозможность менять текст тултипа "на лету". Косвенно это можно делать изменяя атрибут title у целевого элемента, но это не совсем удобно при генерации содержимого, когда сами элементы также формируются динамически. Связано это с очередным неочевидным багом ИЕ, который не дает добавлять div всплывающей подсказки в контейнер body до завершения его формирования, т.е. вызов плагина должен осуществляться в рамках волшебной функции $(document).ready(function(){});, иначе все семейство Експлореров будет ругаться примерно так:
HTML Parsing Error: Unable to modify the parent container element before the child element is closed (KB927917)

Ну и в-третьих, это размер. В несжатом виде у меня получилось 1667 b.

как использовать
Добавляем на страницу скрипт
view source
1
<script type="text/javascript" src="scr/jquery.js"></script>
2
<script type="text/javascript" src="scr/jquery.easytooltip.js"></script>
в таблицу стилей класс tooltip, например view source
01
.tooltip {
02
position: absolute;
03
z-index: 1000;
04
border: 1px solid gray;
05
background-color: #FFFFD4;
06
padding: 10px 10px 10px 10px;
07
opacity: 0.85;
08
filter: alpha(opacity=85);
09
}
view source
01
.tooltip {
02
position: absolute;
03
z-index: 1000;
04
border: 1px solid gray;
05
background-color: #FFFFD4;
06
padding: 10px 10px 10px 10px;
07
opacity: 0.85;
08
filter: alpha(opacity=85);
09
}
и вызываем метод tooltip() для целевого элемента (см. примеры).

Доступны следующие параметры:
txt - html код подсказки, если не указан, то берется из title целевого элемента
maxWidth - максимальная ширина всплывающего блока
effect - эффект появления, может принимать значения: fadeIn (по умолчанию), slideDown, hide. Для затухания будет взят противоположный эффект.
duration - длительность появления/затухания

примеры
view source
01
$("#tst").tooltip(); // текст tooltip'а в атрибуте title элемента
02

03
$("#tst2").tooltip({
04
txt: 'Это просто пример всплывающей<br> подсказки JavaScript!',
05
maxWidth: 150
06
});
07

08
$("#tst3").tooltip({txt: '<img src="img/jquery.png" width="60" height="90" alt="jquery" />'});
09

10
$("#tst4").tooltip({
11
txt: 'Это пример изменения эффекта появления',
12
effect: 'slideDown'
13
});
14

15
$("#tst5").tooltip({
16
txt: 'Это пример изменения длительности появления',
17
effect: 'show',
18
duration: 900
19
});


Источник: http://easywebscripts.net

Рекомендуем



jQuery основы На первый взгляд связь не очевидна, но дело в том, что в основе функционирования jQuery лежит возможность легкого доступа к любому узлу xml дерева, коим и является html документ, а доступ этот осуществляется с помощью механизмов CSS и XPath


jQuery UI. Widgets. Datepicker (Календарь) Если установить значение true, функция dateFormat будет примерена к значениям опций nextText, prevText и currentText с тем, чтобы отображать при навигации, например предыдущее и следующее названия месяцев


jQuery - что это такое Широко бытовало мнение, что шаблонизация рациональна только средствами серверных языков программирования, но jQuery, благодаря развитому механизму обработки событий, позволил уже на уровне javascript отделить логику от представления