jquery plugin with multiple functions

Question

According to the developer documentation jquery plugins are supposed to have only one namespace for all functions they make available. Which is straight forward as long as you only expose a single function per context (static/element).

(function($){

    var

    state_a = 0,

    $.myplugin = function(in_options) {
      // static
      return this;
    }

    $.fn.myplugin = function(in_options) {
      // element
      return this;
    }

})(jQuery);

This makes calls like this possible:

$("elem").myplugin(options);
jQuery.myplugin(options);

What's the best approach if you have more than one function and need to share state? I would like to call into my plugin like this:

$("elem").myplugin.start(options);
$("elem").myplugin.stop();
jQuery.myplugin.start(options);
jQuery.myplugin.stop();

dochoffiday · Accepted Answer · 2010-04-12 18:52:36Z

6

I've used arguments.callee before:

(function ($) {
    $.fn.pagination = function (options) {
        var defaults = {
        };
        options = $.extend(defaults, options);

        var object = $(this);

        arguments.callee.updatePaging = function () {
            //do stuff
        };
    });

Then, on your page:

    var pagination = $("#pagination");
    pagination.pagination();
    pagination.pagination.updatePaging();

answered Apr 12, 2010 at 18:52

dochoffiday

5,6057 gold badges34 silver badges41 bronze badges

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

3 Comments

tcurdt Over a year ago

Exactly what I was after. Perfect! Thanks!

iChido Over a year ago

This is a great approach. However arguments.calee has been deprecated. Does anyone know how to do the above in a new ES6 way?

iChido Over a year ago

With arguments.callee deprecated I sought out to find a solution and I found one! See here: stackoverflow.com/q/71681979/788322

Matti Virkkunen · Accepted Answer · 2010-04-12 18:46:44Z

1

jQuery plugins tend to use a string parameter for different functions:

$(...).myplugin('start', options);
$(...).myplugin('stop');

I can't think of an easy way to use the syntax you would like to use, since having an extra property inbetween will make this point to something else than the jQuery object with the selected elements. Personally I find using a string parameter to completely change what the function does somewhat ugly too. $(...).myplugin().function() would be doable, but likely not as efficiently as just using that string parameter.

answered Apr 12, 2010 at 18:46

Matti Virkkunen

65.4k9 gold badges138 silver badges162 bronze badges

Comments

jackocnr · Accepted Answer · 2011-11-20 22:40:36Z

0

This is explained well in the docs: http://docs.jquery.com/Plugins/Authoring#Namespacing

answered Nov 20, 2011 at 22:40

jackocnr

17.4k10 gold badges58 silver badges63 bronze badges

Collectives™ on Stack Overflow

jquery plugin with multiple functions

3 Answers 3

3 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related