Пишем плагин всплывающих подсказок

Продолжаем разговор о написании собственных jQuery плагинов. Этот пост посвятим полностью практике и напишем простенький плагин всплывающих подсказок. Думаю, подобных плагинов Вы видели не одну штуку, поэтому не буду объяснять что это такое и зачем нужно. Сразу к делу.

Начнем с основы. Для того, чтобы плагин работал, и мы могли его вызывать с помощью такой конструкции:

$('#smth').tooltip();

Достаточно написать такой код:

(function($){
    // Инициализация
    $.fn.tooltip = function()
    {
// тут что-то делаем
    };
})(jQuery);

Теперь нужно научить наш плагин принимать от нас не только набор элементов, но и еще некоторые настройки, например, класс слоя с подсказкой, на случай, если Вы захотите его переопределить или использовать подсказки разных видов на одной странице; атрибут элемента, значение которого нужно использовать в качестве текста подсказки; скорость появления подсказки. Думаю, этих трех параметров будет достаточно. Передавать мы их будем при применении плагина к набору:

$('#smth').tooltip({tipclass:'mytooltip', attr: 'tip', speed: 'fast'});

Для этого дополним наш плагин:

    $.fn.tooltip = function(options)
    {
        var obj = new Construct(this, options); // создаем новый объект
        return obj; // возвращаем ссылку на объект, чтобы можно было строить цепи
    };
 
    // Настройки
    function Construct(el, options) {
// устанавливаем опции
        this.opts = $.extend({
            tipclass: 'tooltip',
            attr: 'title',
            speed: 'slow'
        }, options);
 
        this.$el = $(el);
 
    };

Заметили, что настройки устанавливаем с помощью метода extend? Это не спроста. Такая конструкция нужна чтобы слить настройки, переданные в вызове метода с настройками по умолчанию. То есть, если мы передаем свои опции, они будут сохранены в this.opts, если настройка пропущена — в this.opts будет помещено значение по умолчанию.

Идем дальше. Теперь нам нужно создать на странице слой для подсказок, назначить обработчики наведения мыши на элемент, которые бы выводили подсказки. Это сделаем с помощью такого кода:

    Construct.prototype = {
        init: function(){
 
            var tpl = '<div class="'+this.opts.tipclass+'" id="tooltip"></div>';// шаблон слоя для подсказок
            $('body').append(tpl); // добавляем к документу
            $('#tooltip').hide(); // скрываем
            var self = this;
            this.$el.hover(function(ev){ // назначаем обработчики
                self.showTooltip(this);
            }, function(){
                self.hideTooltip(this);
            });
        },
        showTooltip: function(obj){ // показываем подсказку
            var obj_offset = $(obj).offset(); // позиция элемента, на который навели мышь
            $('#tooltip').text($(obj).attr(this.opts.attr)).offset({ // устанавливаем текст подсказки
                top:obj_offset.top+$(obj).height(),// помещаем слой с подсказкой под элементом
                left:obj_offset.left
            }).stop(true, true).slideDown(this.opts.speed); // показываем подсказку
            $(obj).attr(this.opts.attr, '');
            return false;
        },
        hideTooltip: function(obj){
            $('#tooltip').stop(true, true).slideUp(this.opts.speed); // скрываем подсказку
            $(obj).attr(this.opts.attr, $('#tooltip').text());
            return false;
        }
    }

Методы showTooltip и hideTooltip будут вызываться при наведении курсора мыши на элемент набора и после того, как курсор покинет область элемента соответственно. Ничего сложного :)
Теперь немного приукрасим нашу всплывающую подсказку:

.tooltip {
    position: absolute;
    top:0;
    left:0;
    border: 2px #6600ff solid;
    background: yellow;
    padding: 8px;
    z-index: 500;
    border-radius: 8px;
    -moz-border-radius: 8px;
    -webkit-border-radius: 8px;
}

Вот пожалуй и всё, новым плагином всплывающих подсказок можно пользоваться. Конечно, в нем есть некоторые недоработки, о которых я говорить не буду, ибо цель данного поста — показать как писать свои собственные jQuery плагины. Надеюсь, эта цель выполнена успешно. В последующих постах я еще обязательно вернусь к этой теме. И, напоследок, демо.

Запись опубликована в рубрике JS & jQuery с метками , . Добавьте в закладки постоянную ссылку.

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong> <pre lang="" line="" escaped="" cssfile="">