Rapid Template Development
with Joomla, YUI & jQuery
Chris Rault, Web Monkeys
CMSExpo, Denver Colorado - December 08
http://joomlajunkie.com http://prothemer.com http://cmsexpo.net

jquery examples
Setting jQuery into “no-conflict” mode
var $pt = jQuery.noConflict();
$pt(document).ready(function(){
// CODE HERE
});
});
http://jquery.com

jquery examples
Example 1.) Enhance your sidebar menu with simple toggle functions.
$(\".menu .parent ul\").hide();
$(\"ul.menu li.parent a\").click(function(){
$(this).next().toggle().end();
return false;
});
http://jquery.com

jquery examples
Example 2.) Add “first” & “last” classes to sidebar modules.
$(\"#sidebar .module:first\").addClass(\"first\");
$(\"#sidebar .module:last\").addClass(\"last\");
http://jquery.com

jquery examples
Example 3.) Add a class to form input elements based on their type:
$(\"input\").each(function() {
$(this).addClass($(this).attr(\"type\"));
http://jquery.com

jquery examples
Example 4.) Remove the last “span.separator”:
$(\".inner .article_separator:last\").addClass(\"last\");
http://jquery.com

jquery examples
Example 5.) Zebra striping on table rows (or anything!):
$(\"table tr:even\").addClass(\"alt\");
http://jquery.com

jquery examples
Example 6.) Assign images a class based on their alignment:
$('img[align*=right]').addClass(\"img-right\");
$('img[align*=left]').addClass(\"img-left\");
http://jquery.com

jquery examples
Example 7.) Add a “teaser” class to first paragraphs of an article:
$(\"#content p:first\").addClass(\"teaser\");
http://jquery.com

jquery examples
Example 8.) Onion shadows / rounded corners:
$pt(\".shadow\").wrap($pt(\"<div class='shadow0'>
<div class='shadow1'><div class='shadow2'><div
class='shadow3'></div></div></div></div>\"));
http://jquery.com

jquery examples
Example 9.) Easy rounded corners plugin:
<script src=\"<?php echo $templatepath;?>js/jquery.corners.min.js\"
language=\"javascript\" type=\"text/javascript\"></script>
Basic Usage:
$pt('#mystyle1 #nav #current.first a').corners(\"10px top-left\");
$pt('#mystyle1 #nav').corners(\"10px top\");
$pt('.right-pullquote').corners(\"10px\");
$pt('.rounded .mod-content').corners(\"10px bottom\");
$pt('.rounded h3').corners(\"10px top\");
http://jquery.com

jquery examples
jQuery Resources:
http:// jquery.com
http://docs.jquery.com
http://jquery.com/plugins
http://visualjquery.com
http://learningjquery.com
http://15daysofjquery.com
http://jquery.com

jquery examples
jQuery Resources (on the cd):
★ Learning jQuery Video Tutorial Series by
Nettuts.com (parts 1 - 5) & others.
★ 4 Jquery Cheatsheets
★ Intro to jQuery pdfs & ppts.
http://jquery.com