CODEWITHSUNDEEP
jquery
salmane
salmane

Reputation: 4849

How can I make a jQuery plugin available both as a method on element collections and a stand-alone function?

I am trying to create a jquery plugin, and I want have the following options:

  1. $.plugin_name(variable)

  2. $(selector).plugin_name(variable)

The first case the plugin would not need to be applied to an element ( it could create one for example) the second case the same plugin will do whatever it does on the element/s selected

My question is: How do I specify inside the plugin this:

if (selector is not given) {
  create an element
} else {
  ( for example) insert variable in elements matching the selector
}

Upvotes: 3

Views: 4000

Answers (3)

Jacob Relkin
Jacob Relkin

Reputation: 163228

You can use jQuery.fn.myPluginName = function().... for plugins that operate on jQuery objects.

For a standalone function in the jQuery namespace, you can just set jQuery.func_name = function()....

An example:

jQuery.fn.erase = function() {
   return this.each(function() {
       jQuery(this).remove();
   });
};

jQuery("body").erase();

jQuery.erase = function(element) {
   jQuery(element).erase();
};

jQuery.erase("body"); // exact same result.

Upvotes: 10

David Hellsing
David Hellsing

Reputation: 108490

By using $.myFunc you are simply adding a function to the jQuery namespace.

By using $.fn.myFunc, you are extending the jQuery prototype, which means that the this keyword inside the function will represent the jQuery object returned from the selector.

If you'd like them both to do the same thing, you can check for the jQuery instance and create a new element:

try this:

$.myFunc = $.fn.myFunc = function(first, second) {
    if (!(this instanceof $)) {
        return $.fn.myFunc.apply($('<div>'), arguments);
    }
    // begin plugin code here:
    return this.each(function() {
        $(this).text(first + ' ' + second);
    });
};

// now you can call myFunc in two ways:

$('<div>').myFunc('foo','bar').appendTo('body') 

$.myFunc('bar','foo').appendTo('body');

Upvotes: 4

cletus
cletus

Reputation: 625037

To cover $.plugin_name() use:

jQuery.plugin_name = function(data) {
  // do stuff
}

For $(selector).plugin_name() use:

jQuery.fn.plugin_name = function() {
  return this.each(function() {
    // do stuff
  });
};

See Plugins/Authoring.

Upvotes: 2

Related Questions