Trying to learn jQuery plugin development

Question

So I'm trying to learn how to implement method collection for a plugin based on this example: http://docs.jquery.com/Plugins/Authoring

What I cannot understand is how options that are extended with defaults for the plugin get sent to the individual methods.

I'm pretty sure any original options get sent to the method here:

return methods[ method ].apply( this, Array.prototype.slice.call( arguments, 1 ));

So how can you extend these arguments with defaults? The example doesn't really define how to do this...

var methods = {
      init : function( options ) {

           return this.each(function(){
               $(window).bind('resize.tooltip', methods.reposition);
           });

       }
}

Also, here is the code from the example plugin authoring page:

    (function( $ ){

  var methods = {
     init : function( options ) {

       return this.each(function(){
         $(window).bind('resize.tooltip', methods.reposition);
       });

     },
     destroy : function( ) {

       return this.each(function(){
         $(window).unbind('.tooltip');
       })

     },
     reposition : function( ) { // ... },
     show : function( ) { // ... },
     hide : function( ) { // ... },
     update : function( content ) { // ...}
  };

  $.fn.tooltip = function( method ) {

    if ( methods[method] ) {
      return methods[method].apply( this, Array.prototype.slice.call( arguments, 1 ));
    } else if ( typeof method === 'object' || ! method ) {
      return methods.init.apply( this, arguments );
    } else {
      $.error( 'Method ' +  method + ' does not exist on jQuery.tooltip' );
    }    

  };

})( jQuery );

user113716 · Accepted Answer · 2011-02-04 17:49:31Z

3

Looks like my previous answer was closer to the mark than I previously thought.

Yes, this line is passing on the arguments:

return methods[method].apply( this, Array.prototype.slice.call( arguments, 1 ));

Using .apply(), you can call a method, change its context (this value), and give it a collection of arguments instead of individual ones. Handy if you don't know how may arguments need to be passed on.

So you can break the above line down like this:

  // reference the arguments passed to the plugin
var args = arguments;

  // eliminate the first one, since we know that's just the name of the method
args = Array.prototype.slice.call( arguments, 1 )

  // call the method that was passed, 
  //    passing along the Array of the arguments (minus the first one),
return methods[method].apply( this, args);

// Note that it is being called from the context of "this" which is the jQuery object

So if the plugin was called like this:

$('.someElem').tooltip('destroy', 'someArg', 'anotherArg' );

The code will locate the "destroy" method, slice "destroy" off of the Arguments object, and call "destroy" passing along the Array of remaining arguments.

answered Feb 4, 2011 at 17:49

user113716

323k64 gold badges454 silver badges441 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Jeff Over a year ago

Yep! Definitely part of what I wanted to know. So the only thing left is when to extend the options passed in (arguments) with defaults setup by the plugin. I'm hoping this doesn't happen from within the init method, but if does, how can it be accessed within other methods in the literal?

user113716 Over a year ago

@Jeff: It will completely depend on the plugin. You need to treat each method separately and decide if it needs to accept arguments (or a single options argument) and if it should have defaults. So if it makes sense for init to have options with defaults, do it there. If any of the other methods need their own arguments of any type, they would accept their own. Is this what you meant, or am I on the wrong track?

user113716 Over a year ago

...I'd add that the tutorial gives an example of a particular pattern in developing a plugin. It isn't the only way to go, but it is a nice way to do it so that if you have several methods that need to be called, you've namespaced them all under one plugin.

Jeff Over a year ago

@patrick dw. Okay, I understand. I did get my little plugin to work. I think I was trying to do too much. Usually if you cannot figure out how to make something to work, you're doing it the wrong way. But your comments are invaluable as I know more about how jQuery plugins work. Thanks!

bcm Over a year ago

@patrick dw: thanks for the break-down, exactly what I needed to know.

Luke · Accepted Answer · 2011-02-04 17:40:50Z

1

you use $.extend(existingObject || {} (new object), oneObject, secondObject, nthObject)

var mydefaults = { myDefaultArg : "foo" }
var inputOptions = { myDefaultArg : "Somethin else" }

var options = $.extend({}, mydefaults, inputOptions);

options.myDefaultArg == "Somethin else";

To access data, or to save them,you can use the data method

so if you are in the plugin, "this" is the jquery element element, you can now save data into it.

$(this).data("pluginname.somedataname", data);

and retriev it

var data = $(this).data("pluginname.somedataname");

edited Feb 4, 2011 at 17:40

answered Feb 4, 2011 at 17:18

Luke

8,4173 gold badges24 silver badges36 bronze badges

1 Comment

Jeff Over a year ago

Right, I understand how to use the extend function. I probably didn't ask the question as well as I could have. My question is more how to pass options around from the initial $('el').tooltip(options) and how to access them from within the "method" literals.

Collectives™ on Stack Overflow

Trying to learn jQuery plugin development

2 Answers 2

5 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related