Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Rapid Template Development
                                 with Joomla, YUI & jQuery
                                 Chr...
jquery examples

Setting jQuery into “no-conflict” mode



     var $pt = jQuery.noConflict();
     
 $pt(document).ready(fu...
jquery examples

Example 1.) Enhance your sidebar menu with simple toggle functions.



     $(quot;.menu .parent ulquot;)...
jquery examples

Example 2.) Add “first” & “last” classes to sidebar modules.




$(quot;#sidebar .module:firstquot;).addCla...
jquery examples

Example 3.) Add a class to form input elements based on their type:




$(quot;inputquot;).each(function(...
jquery examples

Example 4.) Remove the last “span.separator”:




$(quot;.inner .article_separator:lastquot;).addClass(qu...
jquery examples

Example 5.) Zebra striping on table rows (or anything!):




$(quot;table tr:evenquot;).addClass(quot;alt...
jquery examples

Example 6.) Assign images a class based on their alignment:




$('img[align*=right]').addClass(quot;img-...
jquery examples

Example 7.) Add a “teaser” class to first paragraphs of an article:




$(quot;#content p:firstquot;).addCl...
jquery examples

Example 8.) Onion shadows / rounded corners:




$pt(quot;.shadowquot;).wrap($pt(quot;<div class='shadow0...
jquery examples

Example 9.) Easy rounded corners plugin:


<script src=quot;<?php echo $templatepath;?>js/jquery.corners....
jquery examples

jQuery Resources:


            http:// jquery.com
            http://docs.jquery.com
            http://...
jquery examples

jQuery Resources (on the cd):



★ Learning jQuery Video Tutorial Series by
   Nettuts.com (parts 1 - 5) ...
Upcoming SlideShare
Loading in …5
×

Rapid Template Development Part 2

2,344 views

Published on

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

Published in: Technology

Rapid Template Development Part 2

  1. 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. 2. jquery examples Setting jQuery into “no-conflict” mode var $pt = jQuery.noConflict(); $pt(document).ready(function(){ // CODE HERE }); }); http://jquery.com
  3. 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. 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. 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. 6. jquery examples Example 4.) Remove the last “span.separator”: $(quot;.inner .article_separator:lastquot;).addClass(quot;lastquot;); http://jquery.com
  7. 7. jquery examples Example 5.) Zebra striping on table rows (or anything!): $(quot;table tr:evenquot;).addClass(quot;altquot;); http://jquery.com
  8. 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. 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. 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. 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. 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. 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

×