How to create a jQuery plugin with methods?

by

I’m trying to write a jQuery plugin that will provide additional functions/methods to the object that calls it. All the tutorials I read online (have been browsing for the past 2 hours) include, at the most, how to add options, but not additional functions.

Here’s what I am looking to do:

//format div to be a message container by calling the plugin for that div

$("#mydiv").messagePlugin();
$("#mydiv").messagePlugin().saySomething("hello");

or something along those lines.
Here’s what it boils down to: I call the plugin, then I call a function associated with that plugin. I can’t seem to find a way to do this, and I’ve seen many plugins do it before.

Here’s what I have so far for the plugin:

jQuery.fn.messagePlugin = function() {
  return this.each(function(){
    alert(this);
  });

  //i tried to do this, but it does not seem to work
  jQuery.fn.messagePlugin.saySomething = function(message){
    $(this).html(message);
  }
};

How can I achieve something like that?

Thank you!

Update Nov 18, 2013: I’ve changed the correct answer to that of Hari’s following comments and upvotes.

20 Answers
20

Leave a Comment