Подсказки с помощью jQuery (plugin)

10.12.2008, 18:41
Рубрика: jquery

Пример написания плагина подсказок для jquery. Пришла необходимость в нормальных подсказках на сайте, а те примеры которые нашлись, не подходили по разным параметрам. Возможно, что поиск подвел, но ведь всегда приятно создать что-то свое. Да и лучше написать с нуля, чем переделывать чужое под свои нужды. И после некоторых мучений, мы имеем небольшой, но функциональный плагин.

Скачивайте, используйте и переделывайте на здоровье: pro.tips.0.1.js

UPD: pro.tips.0.2

А вот и демо: Сейчас, дети

программисты ;)

, я расскажу вам, как написать плагин

plugin!

подсказок для jQuery

jQuery – очень интересная штука.

И так начнем описывать. Надеюсь сам код плагина proTips у вас перед глазами, с меня только некоторые вырезки с комментариями.

В плагин воткнуты установки по умолчанию:

options = $.extend({
    tips: "div.protips",           // где же будут у нас подсказки?
    tags: "a, span, strong",       // на какие теги будут всплывать подсказки
    width: 100,                    // ширина блока подсказок
    border: "1px solid #FF0000",   // бордер блока подсказок
    color: "#000000",              // цвет текста подсказки
    background: "#EEEEEE",         // и естественно фон
    link: "#FF0000",               // цвет ссылки
    underline: "1px dotted #FF0000"// подчеркивание ссылки
}, options);

и естественно они могут задаваться при вызове protips.

По умолчанию теги с подсказками находятся в <div class="protips"></div>, это параметр tips. А вешается все это дело в a, span, strong, что показывает tags. К чему все это?

$("div.protips").children("a, span, strong")
// в div с классом protips “взять” все a, span, strong

Когда то понадобятся другие теги, а переделывать постоянно не зачем, потому вынесено все в параметры, на что получаем универсальный вызов:

$(options.tips).children(options.tags)

Изменяем все стили тэгов:

$(options.tips).children(options.tags).css({
    'display': 'inline',
    'text-decoration': 'none',
    'color': options.link,
    'height': 18,
    'border-bottom': options.underline
});

И, форматируем и скрываем сами подсказки. Подразумевая, что подсказки у нас находятся в <div> в <div class="protips"> (далее будет понятнее :):

$(options.tips).children("div").css({
    'position': 'absolute',
    'display': 'none',
    'width': options.width,
    'color': options.color,
    'background-color': options.background,
    'border': options.border
});

Биндим на наведении и на перемещение (чтобы подсказка двигалась за указателем, пока мышь находится на ссылке):

$(options.tips).children(options.tags).bind("mouseover, mousemove", function(e) {
    $(this).next("div").css({ // вот слой, где текст подсказки
        'display': 'block', // показать подсказку
        'top': e.pageY+12,   // переместить к позиции указателя мыши
        'left': e.pageX+12   // ---=---
    });
    return false;
});

Как указатель ушел, пора скрыть подсказку:

$(options.tips).children(options.tags).bind("mouseout", function() {
    $(this).next("div").css({
        'display' : 'none'
    });
    return false;
});

Нужно было, не переходить никуда, если в <a> есть ссылка:

$(options.tips).children(options.tags).bind("click", function() {
return false;
});

Вот и весь плагин. Ничего сложного, а даже наоборот.

А теперь исходник нашего примера:

<div class="protips">
А вот и демо: Сейчас, <span>дети</span><div>программисты ;)</div>, я расскажу вам, как написать <strong>плагин</strong><div>plugin!</div> подсказок для <a href="/">jQuery</a><div>jQuery – очень интересная штука.</div>.
</div>

И получаем отличные tips :)

Пример использования proTips под другие параметры:

<div id="tips">
<h2>Tips plugin jQuery</h2><div>создайте свой plugin для jQuery!</div>
</div>