Posted By

rickygri on 11/15/13

Tagged

Versions (?)

Last Edited at 11/15/13 12:13am

Statistics

Viewed 890 times

Favorited by 0 user(s)

Related snippets

jQuery Plugin template

/ Published in: JavaScript

Uses the object prototype to extend data. Instantiate as an object and use as specified below (bottom of the code)

Expand | Embed | Plain Text

Copy this code and paste it in your HTML

/*
 * Plugin template
 */
(function(window, $){
  var Plugin = function(elem, options){
      this.elem = elem;
      this.$elem = $(elem);
      this.options = options;
    };
 
  Plugin.prototype = {
    defaults: {
      message: 'Hello world!'
    },
    init: function() {
      this.config = $.extend({}, this.defaults, this.options);
 
      this.displayMessage();
 
      return this;
    },
    displayMessage: function() {
      alert(this.config.message);
    }
  };
 
  Plugin.defaults = Plugin.prototype.defaults;
 
  $.fn.plugin = function(options) {
    return this.each(function() {
      new Plugin(this, options).init();
    });
  };
 
  window.Plugin = Plugin;
})(window, jQuery);
 
/*
 * Use plugin
 */
//Set the message per instance:
$('#elem').plugin({
  message: 'Goodbye World!'
});
 
var p = new Plugin(document.getElementById('elem'), {
  message: 'Goodbye World!'
}).init();
 
//Or, set the global default message:
Plugin.defaults.message = 'Goodbye World!';