Enterprise-class

When writing a new jQuery plugin, it helps to start with some general boiler-plate plugin code. Here’s the jQuery plugin template that I keep on file for this purpose. Whenever starting a new plugin, you can grab this and use it as a starting point.

/*
 * jquery.pluginTemplate.js
 *
 */

(function( $ ){
  $.fn.pluginName = function(options) {

	  // there's no need to do $(this) because
	  // "this" is already a jquery object

	  var settings = {
			  'setting1'	:	'val1',
		      'setting2'	:	'val2'
	  };

	  // Maintain chainability...
	  return this.each(function() {

		  // If options exist, merge them
	      // with our default settings
	      if ( options ) {
	        $.extend( settings, options );
	      }

	      // plugin code here

	  }); // END: return this.each(function() { (which maintains chainability)

  };  // END: $.fn.pluginName = function() {
})( jQuery ); // END: (function( $ ){

Replace the plugin name with the name of your plugin. Save the js file as something like jquery.pluginName.js. Include the JS file after jQuery core on your page. Then finally, use the plugin in some way similar to this:

<div id="myContainer"></div>
<script type="text/javascript">
$(document).ready(function() {
   $('#myContainer').pluginName({option1:'option1value', option2:'option2value'});
});
</script>

There are several jQuery events that you can bind to, but you can also create, bind, and trigger your own events. Here’s how… Continue reading →