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

});

Comments

  1. User Avatar
    Simon
    Permalink to comment#

    That’s very useful, thanks!

  2. User Avatar
    Artur Ejsmont
    Permalink to comment#

    Another very nice and useful snippet!

    keep up the good work!

  3. User Avatar
    Andy @ sales++
    Permalink to comment#

    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. User Avatar
    Alex Nertus
    Permalink to comment#

    Nice template.

  5. User Avatar
    Martin
    Permalink to comment#

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

  6. User Avatar
    illmatix

    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. User Avatar
    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. User Avatar
    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!

    • User Avatar
      RonnieSan
      Permalink to comment#

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

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

  9. User Avatar
    Zack Hovatter
    Permalink to comment#

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

  10. User Avatar
    Beau Beauchamp
    Permalink to comment#

    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.

    • User Avatar
      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. User Avatar
    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. User Avatar
    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. User Avatar
    nicolas
    Permalink to comment#

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

  14. User Avatar
    Curt

    This is beyond perfect.

Submit a Comment

Posting Code

You may write comments in Markdown. This makes code easy to post, as you can write inline code like `<div>this</div>` or multiline blocks of code in triple backtick fences (```) with double new lines before and after.

Code of Conduct

Absolutely anyone is welcome to submit a comment here. But not all comments will be posted. Think of it like writing a letter to the editor. All submitted comments will be read, but not all published. Published comments will be on-topic, helpful, and further the discussion or debate.

Want to tell us something privately?

Feel free to use our contact form. That's a great place to let us know about typos or anything off-topic.

icon-closeicon-emailicon-linkicon-logo-staricon-menuicon-searchicon-staricon-tag