Good jQuery Plugin Template

By Sam Deering

This is a good starting point for your next jQuery Plugin. I have created a skeleton example for you to check out on jsfiddle also might be of help to you.

jQuery Plugin Template Code

  jQuery [name] plugin
  @name jquery.[name].js
  @author [author name] ([author email] or @[author twitter])
  @version 1.0
  @date 01/01/2013
  @category jQuery Plugin
  @copyright (c) 2013 [company/person name] ([company/person website])
  @license Licensed under the MIT ( license.

  var myPlugin, defaultOptions, __bind;

  __bind = function(fn, me) {
    return function() {
      return fn.apply(me, arguments);

  // Plugin default options.
  defaultOptions = {
    myvar1: 1,
    myvar2: 2,
    myvar3: 3
    resizeDelay: 50

  myPlugin = (function(options) {

    function myPlugin(handler, options) {
      this.handler = handler;

      // plugin variables.
      this.resizeTimer = null;

      // Extend default options.
      $.extend(true, this, defaultOptions, options);

      // Bind methods.
      this.update = __bind(this.update, this);
      this.onResize = __bind(this.onResize, this);
      this.init = __bind(this.init, this);
      this.clear = __bind(this.clear, this);

      // Listen to resize event if requested.
      if (this.autoResize) {
        $(window).bind('resize.myPlugin', this.onResize);

    // Method for updating the plugins options.
    myPlugin.prototype.update = function(options) {
      $.extend(true, this, options);

    // This timer ensures that layout is not continuously called as window is being dragged.
    myPlugin.prototype.onResize = function() {
      this.resizeTimer = setTimeout(this.resizeFunc, this.resizeDelay);

    // Example API function.
    myPlugin.prototype.resizeFunc = function() {
        // something when window is resized

    // Main method.
    myPlugin.prototype.init = function() {
        // something to initialise plugin

    // Clear event listeners and time outs.
    myPlugin.prototype.clear = function() {
      $(window).unbind('resize.myPlugin', this.onResize);

    return myPlugin;

  $.fn.myPlugin = function(options) {
    // Create a myPlugin instance if not available.
    if (!this.myPluginInstance) {
      this.myPluginInstance = new myPlugin(this, options || {});
    } else {
      this.myPluginInstance.update(options || {});

    // Init plugin.

    // Display items (if hidden) and return jQuery object to maintain chainability.


Free Guide:

7 Habits of Successful CTOs

"What makes a great CTO?" Engineering skills? Business savvy? An innate tendency to channel a mythical creature (ahem, unicorn)? All of the above? Discover the top traits of the most successful CTOs in this free guide.

  • Bob Jones

    Nice, I like the singleton pattern! Thanks :)

  • Tom Coakley

    This is probably simple and I am missing something, but how can I refer to the element I attach to? $(“#elementId”).myPlugin(); Currently I am using

    this.container = $(“#” + handler.selector);

    which is a hacky work around that requires I use an ID selector.

Because We Like You
Free Ebooks!

Grab SitePoint's top 10 web dev and design ebooks, completely free!

Get the latest in JavaScript, once a week, for free.