Grow your CSS skills. Land your dream job.

Last updated on:

jQuery Plugin Template

Replace instances of "yourPluginName" with your actual plugin name. The stuff about "radius" is just an example of an option (parameter to pass plugin).

(function($){
    $.yourPluginName = function(el, radius, options){
        // To avoid scope issues, use 'base' instead of 'this'
        // to reference this class from internal events and functions.
        var base = this;
        
        // Access to jQuery and DOM versions of element
        base.$el = $(el);
        base.el = el;
        
        // Add a reverse reference to the DOM object
        base.$el.data("yourPluginName", base);
        
        base.init = function(){
            if( typeof( radius ) === "undefined" || radius === null ) radius = "20px";
            
            base.radius = radius;
            
            base.options = $.extend({},$.yourPluginName.defaultOptions, options);
            
            // Put your initialization code here
        };
        
        // Sample Function, Uncomment to use
        // base.functionName = function(paramaters){
        // 
        // };
        
        // Run initializer
        base.init();
    };
    
    $.yourPluginName.defaultOptions = {
        radius: "20px"
    };
    
    $.fn.yourPluginName = function(radius, options){
        return this.each(function(){
            (new $.yourPluginName(this, radius, options));

		   // HAVE YOUR PLUGIN DO STUFF HERE
			
	
		   // END DOING STUFF

        });
    };
    
})(jQuery);

Usage

$(function() {

    $("#round-me").yourPluginName("20px");

});

Reference URL

Comments

  1. Permalink to comment#

    That’s very useful, thanks!

  2. Another very nice and useful snippet!

    keep up the good work!

  3. Nice template. Quite a different layout from others I’ve seen, but will definitely give this a go.

    Here’s an alternative jQuery plugin template.

    Thanks

  4. Nice template.

  5. Martin
    Permalink to comment#

    This template is totally different from jquery docs. Are their any benefits to this type of template format?

  6. I find this template the best out of all the ones I’ve used. It’s been my starting point for the past couple years.

  7. unstoppableCarl
    Permalink to comment#

    I don’t completely follow the logic of its organization. I think it would be easier to understand if your example had some event driven functionality.

  8. Peter G
    Permalink to comment#

    How would you go about making functions public with this template?

    e.g. access a function called base.foo?

    Cheers!

    • You can access something like base.foo by using the reverse reference in the DOM object.

      $(‘someElement’).data(‘pluginName’).foo();

  9. I’m also wondering the answer to Peter Gs question. Anyone?

  10. This plugin design is not used by the official jQuery team because is pollutes the jQuery function namespace. The jQuery version is better since it allows you to use the “this” keyword in a more natural context.

    • Rob
      Permalink to comment#

      +1: This is not the official jQuery way due to namespace pollution. You can still access ‘this’ in other ways – you do not need ‘base’.

  11. silvawebdev
    Permalink to comment#

    Any chance these can work with ie? I get banding in the left corners – probably on the right too, but they our outside the div. I am stuck with the image buttons until this works, or there is some other work around… Any ideas – besides ignoring ie6,7,8,9?

  12. Jon Jaques
    Permalink to comment#

    Although this plugin does have an irregular structure, It does not pollute the $.fn namespace at all. As long as you declare you functions like so:

    base.myFunctionName = function(){};

    All functions are namespaced under $.yourPluginName. This is because everything is wrapped in the main plugin closure.

    Additionally, the use of base in place of this is smart, because it prevents the novice user from confusing it with this in the context of another function.

    For instance, if you refer to this inside of base.init(), you are referring to the init function itself, not your plugin. Using base makes it clear what belongs to the plugin, and what doesn’t.

  13. nicolas
    Permalink to comment#

    why doing this:
    $.fn.yourPluginName = function(radius, options){
    return this.each(function(){
    (new $.yourPluginName(this, radius, options));

Leave a Comment

Current day month ye@r *

*May or may not contain any actual "CSS" or "Tricks".