Editing 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 work on DOM elements==
==Plugins that return a value==
<syntaxhighlight lang="javascript">
$.fn.totalWidth() {
	var w = 0;
	this.each(function() {
		w += $(this).width();
	});
	return(w);
}
</syntaxhighlight>
Then call the custom JQuery routine like this, which would return the total width of all the DIVS within the document:
<syntaxhighlight lang="javascript">
$('div').totalWidth();
</syntaxhighlight>
Some things to note about the example above:
*<code>this</code> refers to all the elements that match the selector.
*Within the <code>$.each()</code> function, <code>$(this)</code> refers to the current single element in the list of elements that match the selector. 
*Declare and return the value outside the <code>$.each()</code> routine.
== Passing local configuration values to a `$.ajax` or `$.post` success callback ==
<syntaxhighlight lang="javascript" highlight="11-12,18">
var methods = {
	eventHandler: function(evt) {
		evt.preventDefault();
		var options = evt.data || {};
		var lclSettings = $.extend(true, {}, settings, options);
		$.ajax({
			method: 'get',
			data: { foo: bar, biz: baz },
			dataType: 'json',
			success: function(data) {
				data.settings = options;
				methods.successCallback(data);
			}
		});
	},

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

		/* remaining callback logic */
	}
}
</syntaxhighlight>

== Passing local configuration values to an event handler ==

Use 2nd argument to [http://api.jquery.com/on/ jQuery's built-in `$.on` routine].

<syntaxhighlight lang="javascript" highlight="1,10">
$(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);
	}
}
</syntaxhighlight>

== See also ==
[[LITTLED JQuery Plugins]]

[[Category:Web Development]]
[[Category:CMS Documentation]]
[[Category:JQuery/AJAX]]