jQuery send message to plugin

Question

Hi there,

I have a custom plugin, with a constructor like this:

 (function($){

    $.fn.extend({ 

        myplugin: function(options) {
  [..]

In the plugin, I have a bunch of other functions. Now I attach my plugin to a dom-element:

$('myelement').myplugin()

and after that I want to send a message to the plugin from the wrapping document. Basically, I want to call the internal function with custom parameters from outside. How can I achieve this?

Thanks a lot.

Answer 1

Follow the tutorial and keep an I on the part with exposing secondary functions.

http://www.learningjquery.com/2007/10/a-plugin-development-pattern

For example, the implementation of our plugin may define a function called "format" which formats the hilight text.

If you use that secondary function (here "format") for calling your plugin you should be good to go.

Answer 2

I follow the following pattern while developing jQuery plugins. Its quite helpful:

(function($)   {
   $.fn.myWidget = function(options)  {
      var defaults = {
         // default options
      };
      // these are our final options
      var opts = $.extend(defaults, options);

      // private functions
      var myFunc = function(param) {
      };

      // our widget object
      var widget = {
         functionA: function(strMsg)  {
            // do something important or call internal function myFunc
         },


         functionB: function(idx)   {
            // do something important
         }
      };
      // return the widget object 
      return widget; // THIS WILL HELP YOU CALL FUNCTIONS ON YOUR WIDGET
   };
})(jQuery);

var w = $("#myDiv").myWidget();
w.functionA("Hell(o)");

Another way to do it:

(function($)   {
   $.fn.myWidget = function(options)  {
      var defaults = {
         // default options
      };
      // these are our final options
      var opts = $.extend(defaults, options);

      // private functions
      var myFunc = function(param) {
      };

      this.functionA = function(strMsg) {
      };

      this.functionB = function(param) {
      };

      return this;

   };
})(jQuery);

var w = $("#myDiv").myWidget();
w.functionA("Hell(o)");

Answer 3

The most common way to communicate between plugins and the rest of your scripts is via the options object. Example:

$.fn.extend({ 
    myplugin: function(options) {
        $.extend({
            hello: function(){
                return 'yo'; // default message
            }
        },options);
        alert(options.hello());
    }
});

$('#elem').myplugin({
    hello: function() {
        return 'hi';
    }
});

You can also create static methods in the same namespace:

$.fn.extend({ 
    myplugin: function() {
        var hello = function(msg) {
            msg = msg || 'yo'; // default message
            alert(msg);
        };
        $.myplugin = {
            hello: hello
        };
    };
});

$('#elem').myplugin();
$.myplugin.hello('hi')