jQuery plugin skeleton

Example to show how to access plugins internal methods and variables.

by styu

HTML

<div id="mydiv">This is the message container...</div>

JavaScript

jQuery.fn.messagePlugin = function() {

    return this.each(function() {

        var lastmessage,
            $this = $(this);

        $this.on('messagePlugin.saySomething', function(e, message) {
            lastmessage = message;
            saySomething(message);
        });

        $this.on('messagePlugin.repeatLastMessage', function(e) {
            repeatLastMessage();
        });

        function saySomething(message) {
            $this.html("<p>" + message + "</p>");
        }

        function repeatLastMessage() {
            $this.append('<p>Last message was: ' + lastmessage + '</p>');
        }

    });

}

var mp = $("#mydiv").messagePlugin();

// the plugin returns the element it is called on
mp.trigger("messagePlugin.saySomething", "hello");

// so defining the mp variable is not needed...
$("#mydiv").trigger("messagePlugin.repeatLastMessage");