jQuery: plugin's destroy method

by Anand Rathod

HTML

<p>Lorem ipsum dolor sit <a href="#" class="message">amet et ideo autem aquis</a>.</p>

<p><button id="destroy">Destroy Message</button></p>

CSS

body {
    margin: 2em auto;
    width: 80%;
}

p {
    margin: 1em 0;
}

JavaScript

(function($) {

    $.fn.cursorMessage = function(options) {
        var that = this;        

        options = $.extend({
            text: 'Test',
            textcolor: '#333',
            background: '#ccc',
            width: 150
        }, options);


        $('<div id="cursormessage"></div>').css({
            color: options.textcolor,
            backgroundColor: options.background,
            width: options.width,
            position: 'absolute'
        }).text(options.text).appendTo('body').hide();

        $.fn.cursorMessage.destroy = function() {

            $('#cursormessage').remove();
            that.unbind('mousemove');

        }



        return this.each(function() {



            var message = $('#cursormessage');


            $(this).mousemove(function(e) {
                message.css({
                    display: 'block',
                    top: e.pageY - 5,
                    left: e.pageX + 15
                });
            });

        });

    };

}(jQuery));

$('a.message').cursorMessage();


$('#destroy').click(function() {
    $('a.message').cursorMessage.destroy();
});