Skip to main content

Good jQuery Plugin Template

By Sam Deering



Free JavaScript Book!

Write powerful, clean and maintainable JavaScript.

RRP $11.95

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.


Sam Deering has 15+ years of programming and website development experience. He was a website consultant at Console, ABC News, Flight Centre, Sapient Nitro, and the QLD Government and runs a tech blog with over 1 million views per month. Currently, Sam is the Founder of Crypto News, Australia.

New books out now!

Learn valuable skills with a practical introduction to Python programming!

Give yourself more options and write higher quality CSS with CSS Optimization Basics.