Part 2 of Rapid Template Development with Joomla! 1.5, YUI CSS & jQuery that i presented at CMSexpo in Denver, Colorado. The Morph framework and toolset for Joomla is now available for purchase and use - read more at http://www.joomlajunkie.com/templates/morph/morph.html

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

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

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

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

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

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

7. jquery examples
Example 5.) Zebra striping on table rows (or anything!):
$(quot;table tr:evenquot;).addClass(quot;altquot;);
http://jquery.com

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

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

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

11. jquery examples
Example 9.) Easy rounded corners plugin:
<script src=quot;<?php echo $templatepath;?>js/jquery.corners.min.jsquot;
language=quot;javascriptquot; type=quot;text/javascriptquot;></script>
Basic Usage:
$pt('#mystyle1 #nav #current.first a').corners(quot;10px top-leftquot;);
$pt('#mystyle1 #nav').corners(quot;10px topquot;);
$pt('.right-pullquote').corners(quot;10pxquot;);
$pt('.rounded .mod-content').corners(quot;10px bottomquot;);
$pt('.rounded h3').corners(quot;10px topquot;);
http://jquery.com

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

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