Question

lately I have been writing a lot of tiny plugins for my web projects but I am still very much a beginner in plugin authoring.

I have been doing a lot of reading on jquery plugins but I simply cannot wrap my head around methods.

Here is what my current plugins mostly look like:

(function($){

    $.fn.extend({ 

        myHelper: function(options) {

            var defaults = {
                some: 'defaults'
            }

            var options =  $.extend(defaults, options);

            return this.each(function() {
                var o = options;

                function next(target) {
                    // do something like slide to the next image in a slideshow 
                    // based on the target and count passed in
                    slide('right');
                }
                function prev(target) {
                    slide('left');
                }

                function slide(direction) {
                    // animation for sliding in the next one
                    $('ul > li.current').animate({ … }, 800);
                }

                // doesn't exactly make sense but its just to illustrate what I need to do.
                $('.next').click(next($('ul > #example'));


            });
        }
    });

})(jQuery);

What I am after now, and I thought method was the way to go here… is to basically not have all these named functions for tiny bits of functionality and instead define methods such as nextSlide, prevSlide, reset, loop i think you get the idea…

You may have noticed that I pass things such as the target into the function (next() for example) and then call the next() as a standalone thing.

I now want to start doing this by simply having a method do all this and enable me to write within my plugin.js file something like $(o.nextBtn).nextSlide(); for example.

But how do I write a method that accepts arguments such as the target in this example?

All the examples and tutorials for methods I have found so far basically didn’t have an option of accepting arguments into the method’s function. Is this even possible?

Ideally I’d like to make these functions chainable within the my plugin as well but this is starting to get way over my head.

If you know how to create something that does what I want to accomplish in a neat and organized manner or have a good tutorial I should look at, please share.

Thanks.

Answer 1

The recommended way to build a jQuery plugin is to actually place all of your methods into an array, and then use the plugin’s main function to access them.

For example, using some of your example:

function($) {
    var methods = {
      next(target) {
          target.foo();
      }
 };

 $.fn.plugin = 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 );

To use it then:
var blah = $('#' + elemID).plugin('init');
blah.plugin('next','#'+ some_other_element);

In this example, the blah is the object representing your plugin, and then you use the plugin’s method to call functions and pass in the values.