jquery plugin syntax

Question

I am trying to create a jquery plugin

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 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}

thank you for your help

Answer 1

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 ).remove();
};

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

Answer 2

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.

Answer 3

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');