Understanding jQuery Plugins

jQuery Logo

If you’re here, I’m sure it’s no surprise jQuery is an easy library to use. jQuery may be easy, but it still has its quirks and can be difficult for some to grasp beyond basic functionality and concepts. No worries, I’ve got a simple guide here to help break down code, that may seem like overly complex syntax, into simple thoughts and patterns that can be easily understood.

Here, we’ve got a basic plugin layout:

// Shawn Khameneh
// ExtraordinaryThoughts.com
 
(function($) {
	var privateFunction = function() {
		// code here
	}
 
	var methods = {
		init: function(options) {
			return this.each(function() {
				var $this = $(this);
				var settings = $this.data('pluginName');
 
				if(typeof(settings) == 'undefined') {
 
					var defaults = {
						propertyName: 'value',
						onSomeEvent: function() {}
					}
 
					settings = $.extend({}, defaults, options);
 
					$this.data('pluginName', settings);
				} else {
					settings = $.extend({}, settings, options);
				}
 
				// run code here
 
			});
		},
		destroy: function(options) {
			return $(this).each(function() {
				var $this = $(this);
 
				$this.removeData('pluginName');
			});
		},
		val: function(options) {
			var someValue = this.eq(0).html();
 
			return someValue;
		}
	};
 
	$.fn.pluginName = function() {
		var method = arguments[0];
 
		if(methods[method]) {
			method = methods[method];
			arguments = Array.prototype.slice.call(arguments, 1);
		} else if( typeof(method) == 'object' || !method ) {
			method = methods.init;
		} else {
			$.error( 'Method ' +  method + ' does not exist on jQuery.pluginName' );
			return this;
		}
 
		return method.apply(this, arguments);
 
	}
 
})(jQuery);

You may notice the structure I’ve provided is significantly different from others. Plugins can vary depending on usage and needs. Here, it is my goal to explain the concepts in code well enough for you to understand and author a plugin in such a way that suits you best.

So, let’s break it down!
Continue reading

ExtJS Snapping Windows

There’s a really useful feature in Windows 7 that allows windows to be resized just by dragging them to edges of the screen.  Well, I wanted that feature for an ExtJS desktop environment, so here’s my solution for Windows 7 style window dragging.

The following code overrides some functionality in ExtJS and allows windows to be resized in the same manner.

Features:
  • Windows can be dragged when maximized and will resize when dragged.
  • Dragging a window (cursor within 20 pixels) to top of container will maximize it.
  • Dragging a window (cursor within 20 pixels) to left or right of container will resize it to that half of the container.
  • The window ghost will indicate its new size according to placement when dragging.
  • Windows will restore to their original size before being snapped. (Not working in ExtJS 4 version)
  • Adds snapLeft() and snapRight() functions to the Ext.Window component.
  • Unsnapping windows will position them relative to the original cursor position on the title bar. (v2 only)
  • Supports autoloading (v2 only)
Bugs / Quirks:
  • Windows that initialize maximized will restore to 800×400
  • Windows that initialize with resizable = false cannot be dragged when maximized. (Only ExtJS 3.3.1 version)
  • Maximizing a window when snapped to half the screen will make it resize to half of the screen.  (only ExtJS 3.3.1 version when using resize button)
Yeah, the quirks can be easily fixed, I just have no immediate need to fix them.

Continue reading