Coding JQuery Plugins: Difference between revisions

From Littledamien Wiki
Jump to navigation Jump to search
(Created page with "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 w...")
 
No edit summary
Line 1: Line 1:
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.  
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.  
<syntaxhighlighter lang="javascript">
==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.
==See also==
[[LITTLED JQuery Plugins]]
<syntaxhighlight lang="javascript">
$.serializeObject(src, exclude);
$.iconButton(icon_type);
$.iconButton(icon_type);
$.textboxMessage(msg);
$.textboxMessage(msg);
</syntaxhighlighter>
</syntaxhighlight>
[[Category:Web Development]]
[[Category:Web Development]]
[[Category:CMS Documentation]]
[[Category:CMS Documentation]]
[[Category:JQuery/AJAX]]
[[Category:JQuery/AJAX]]

Revision as of 15:24, 28 February 2012

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

$.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.

See also

LITTLED JQuery Plugins

$.serializeObject(src, exclude);
$.iconButton(icon_type);
$.textboxMessage(msg);