Coding JQuery Plugins: Difference between revisions
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. | ||
< | ==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); | ||
</ | </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:
thisrefers 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
$.serializeObject(src, exclude); $.iconButton(icon_type); $.textboxMessage(msg);