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(true, {}, 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 */
	}
}

Passing local configuration values to an event handler

Use 2nd argument to jQuery's built-in $.on routine.

$(selector).on('click', {foo: 'new value', biz: 'bash'}, methods.myEventHandler);

var settings = {
	foo: 'original value'
}
var methods = {
	myEventHandler: function(evt) {

		evt.preventDefault();
		var lclSettings = $.extend({}, settings, evt.data || {});
		console.log('"foo" in myEventHandler: '+lclSettings.foo);
		console.log('"biz" in myEventHandler: '+lclSettings.biz);
	}
}

See also

LITTLED JQuery Plugins