Rapid Template Development Part 2
Upcoming SlideShare
Loading in...5
×
 

Rapid Template Development Part 2

on

  • 3,590 views

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

Statistics

Views

Total Views
3,590
Views on SlideShare
3,581
Embed Views
9

Actions

Likes
2
Downloads
87
Comments
1

5 Embeds 9

http://www.slideshare.net 4
http://www.linkedin.com 2
http://www.denver.cmsexpo.net 1
http://localhost 1
https://www.linkedin.com 1

Accessibility

Categories

Upload Details

Uploaded via as Apple Keynote

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel

11 of 1

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment
  • <br /> <br /> <br />
  • <br />
  • <br /> <br /> <br />
  • <br />
  • <br /> <br /> <br />
  • <br />
  • <br /> <br /> <br />
  • <br />
  • <br /> <br /> <br />
  • <br />
  • <br /> <br /> <br />
  • <br />

Rapid Template Development Part 2 Rapid Template Development Part 2 Presentation Transcript

  • 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. $(quot;.menu .parent ulquot;).hide(); $(quot;ul.menu li.parent aquot;).click(function(){ $(this).next().toggle().end(); return false; }); http://jquery.com
  • 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
  • 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
  • jquery examples Example 4.) Remove the last “span.separator”: $(quot;.inner .article_separator:lastquot;).addClass(quot;lastquot;); http://jquery.com
  • jquery examples Example 5.) Zebra striping on table rows (or anything!): $(quot;table tr:evenquot;).addClass(quot;altquot;); http://jquery.com
  • 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
  • jquery examples Example 7.) Add a “teaser” class to first paragraphs of an article: $(quot;#content p:firstquot;).addClass(quot;teaserquot;); http://jquery.com
  • 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
  • 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
  • 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