Your SlideShare is downloading. ×
  • Like
Rapid Template Development Part 2
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Now you can save presentations on your phone or tablet

Available for both IPhone and Android

Text the download link to your phone

Standard text messaging rates apply

Rapid Template Development Part 2

  • 1,928 views
Published

Part 2 of Rapid Template Development with Joomla! 1.5, YUI CSS & jQuery that i presented at CMSexpo in Denver, Colorado. …

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
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
No Downloads

Views

Total Views
1,928
On SlideShare
0
From Embeds
0
Number of Embeds
1

Actions

Shares
Downloads
88
Comments
1
Likes
2

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide
























Transcript

  • 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