Coding JQuery Plugins

TODO: Document JQuery plugin controls, especially those created for the LITTLED shared libraries. A lot of the existing functionality could be refactored to work better this way.

Plugins that return a value

$.fn.totalWidth() {
	var w = 0;
	this.each(function() {
		w += $(this).width();
	});
	return(w);
}

Then call the custom JQuery routine like this, which would return the total width of all the DIVS within the document:

$('div').totalWidth();

Some things to note about the example above:

• this refers to all the elements that match the selector.
• Within the $.each() function, $(this) refers to the current single element in the list of elements that match the selector.
• Declare and return the value outside the $.each() routine.

Passing local configuration values to a $.ajax or $.post success callback

var methods = {
	eventHandler: function(evt) {
		evt.preventDefault();
		var lclSettings = $.extend({}, settings, evt.data || {});
		$.ajax({
			method: 'get',
			data: { foo: bar, biz: baz },
			dataType: 'json',
			success: function(data) {
				data.settings = lclSettings;
				methods.successCallback(data);
			}
		});
	},

	successCallback: function(data) {
		var lclSettings = $.extend({}, settings, data.settings || {});

		/* remaining callback logic */
	}
}

See also

LITTLED JQuery Plugins