Photo for jQuery Plugin Boilerplate

Below is a pretty powerful jQuery plugin boilerplate. Simply replace the "MyPluginObject" with your object name ie "ScrollerObject" and replace "myPluginName" with "scrollerObject". Then, start adding your code to the prototype and add your default options to the defaults object.

 ;(function ($, doc, win) {
      "use strict";

      /**
       * Our plugin object
       * @param  {jQuery Object} element The dom node that the plugin should be applied to
       * @param  {object} options the options for the plugin instance
       */
      var MyPluginObject = function (element, options) {
           this.$container = $(element);
           this.options = $.extend(true, {}, $.fn.myPluginName.defaults, options);
           this._init();
      };

      /** 
       * Our plugin prototype
       * @type {Object}
       */
      MyPluginObject.prototype = {
           /**
            * Start our app
            * @private
            * @return null
            */
           _init: function() {
                // plugin starter code in here
                return null;
           },

           /**
            * Sets multiple options on the plugin
            * @private
            * @return {object}  The plugin instance
            */
           _setOptions: function (options) {
                var self = this;
                $.each(options, function (key, value) {
                     self._setOption(key, value);
                });

                return this;
           },

           /**
            * Sets an option on the plugin
            * @private
            * @return {object}  The plugin instance
            */
           _setOption: function (key, value) {
                this.options[key] = value;

                return this;
           },

           /**
            * Gets the plugin instance
            * @public
            * @return {object}  The plugin instance
            * 
            */
           widget: function () {
                return this;
           },

           /**
            * Destroys the plugin
            * @public
            * @return {null}
            */
           destroy: function() {

                return null;
           },

           /**
            * Gets/Sets an option
            * @public
            * @example $( ".selector" ).myPluginName('option', 'foo'); returns the value of 'foo'
            * @example $( ".selector" ).myPluginName('option', 'foo', 2); sets the value of foo to 2
            * @example $( ".selector" ).myPluginName('option'); returns all of the options
            * @example $( ".selector" ).myPluginName('option', {foo: 2, bar: 3}); sets the values of the foo option to 2 and the bar option to 3
            */
           option: function(key, value) {
                var options = key;
                if (arguments.length === 0) {
                     // don't return a reference to the internal hash
                     return $.extend( {}, this.options );
                }

                if (typeof key === "string") {
                     if (value === undefined) {
                          return this.options[key];
                     }
                     options = {};
                     options[key] = value;
                }
                this._setOptions(options);

                return this;
           }
      };

      /**
       * Add our plugin to the jQuery fn namespace
       * @param  {*} option  All arguments that are to be passed to the plugin
       */
      $.fn.myPluginName = function (option) {
           var isMethodCall = typeof option === "string",
                args = Array.prototype.slice.call(arguments, 1),
                returnValue = this;
           // prevent calls to internal methods
           if (isMethodCall && option.charAt(0) === "_") {
                return returnValue;
           }

           // call internal method
           if (isMethodCall) {
                this.each(function() {
                     var instance = $(this).data('myPluginName'),
                          methodValue = instance && $.isFunction(instance[option]) ? instance[ option ].apply(instance, args) : instance;
                     if (instance && methodValue && methodValue !== undefined) {
                          returnValue = methodValue;
                          return false;
                     }
                     return false;
                });
           } 
           // instantiate plugin
           else {
                this.each(function () {
                     var $this = $(this),
                          data = $this.data('myPluginName'),
                          options = typeof option === 'object' && option;
                     if (!data) {
                          $this.data('myPluginName', (data = new MyPluginObject(this, options)));
                     }
                });
           }

           return returnValue;
      };

      /**
       * Plugin default options definition
       * @type {Object}
       */
      $.fn.myPluginName.defaults = {
           option1: 'value',
           option2: 'value'
      };

      /**
       * Define our plugin's constructor
       */          
      $.fn.myPluginName.Constructor = MyPluginObject;

 })(jQuery, document, window);

About The Author

James Olson

James is a graduate of the University of Colorado with a degree in business management. After college, he worked for a small advertising company that focused on the Real Estate Industry where his main focus was on web advertising and email campaigns.

In 2008, James joined booj as a member of the Deployment team and quickly moved through the ranks to become the lead front-end developer. In 2012, he was named the Director of Research & Development where he continues to push the envelope of new web technologies.



Similar Posts

Photo for Click Outside Element To Close

Click Outside Element To Close

Here is a little jQuery snippet that allows you to click/touch outside of an element to close it. ...

Photo for Useful JavaScript Snippets

Useful JavaScript Snippets

I can't remember everything so, I've posted a bunch of JavaScript snippets I constantly use and refe...