Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Calling a jQuery plugin without specifying any elements

Say I have the following jQuery plugin:

$.fn.myPlugin = function () {
    //plugin code
}

Normally, you call a plugin on a certain number of elements, like such:

$("body").myPlugin();

Is there any way I can call my plugin without specifying an element?

I have tried calling it like such: $.myPlugin();, but that does not work.

What works is this: $().myPlugin();, but is that the correct way to invoke it?

like image 972
Andreas Grech Avatar asked Nov 18 '09 19:11

Andreas Grech


2 Answers

The quick way to write it is this:

$.myPlugin = function () {
    // Plugin code
}

The right way to write it is this:

(function ($) {
    $.extend({
        myPlugin: function () {
            // plugin code
        }
    });
})(jQuery);

It might seem a little confusing at first, but it's a common jQuery pattern.

(function($){
     // Code
})(jQuery);

This code creates an anonymous function and calls it passing jQuery as argument. Inside the function this argument is bound to $. The reason this is done it that it allows you to work with the $ even if jQuery is running in no-conflict mode.

The second part is $.extend. It basically extends the jQuery object itself, when called with a single argument.

Calling the plugin (in the quick and the right case) is:

$.myPlugin();
like image 184
Emil Ivanov Avatar answered Oct 14 '22 14:10

Emil Ivanov


I think you're looking for jQuery.extend() :

jQuery.extend({
    func: function() {
        alert('test');
    }
});
$.func();
like image 35
I.devries Avatar answered Oct 14 '22 16:10

I.devries