Bring a Web Page Alive with jQuery

Bring a Web Page Alive with jQuery

Learn More @ http://www.learnnowonline.com Copyright Š by Application Developers Training Company

Objectives • Learn about how you can use jQuery to change Web page content and structure • See how you can use jQuery animations to make a page come alive and enhance its usability • Explore the jQuery UI library to add rich functionality to a page’s user interface

Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company

Introduction • Once you know the basics of jQuery, there are many ways to put it to use • Need to find a balance between using HTML/CSS and jQuery • In general, to implement a design feature: 1. Use HTML when you can 2. If HTML can’t do it, use CSS 3. If CSS can’t do it, use jQuery

• Design with progressive enhancement • We’ll go beyond HTML and CSS here Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company

Work with Page Elements • Probably the most common thing you’ll do  Make changes based on user or environment

• Manipulating CSS with jQuery  Read and write CSS properties  Add and remove CSS classes

Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company

Hiding and Showing Page Elements • Use the show, hide, and toggle methods • Works by setting CSS display property

Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company

Changing Element Content • Not limited to changing appearance  text method  html method  val method

• When used to read content, get content only from first element in matched set • When used to write content, affects all elements in the set

Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company

Adding and Removing Page Elements

• Can dynamically add and remove elements  Rewrite the page on the fly with jQuery  Possible in JavaScript, but hard

• html method can sort of add elements  Requires that you build a string

• Methods  insertBefore and insertAfter methods  prependTo and appendTo methods  remove method

• Changes only the in-memory DOM Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company

Use Animations and Effects • DOM enables dynamic effects  JavaScript makes it all possible  But can be overwhelming

• Perfect task for jQuery  Core library includes basic animation support  Provides tools to enhance pages  Remember that there are extensions

• Don’t get carried away!

Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company

Hovering Effects • Commonly need to change appearance when mouse hovers over an element • Several methods  mouseover and mouseout methods  mousedown and mouseup methods  mouseenter and mouseleave methods

• Sample page    

Mouse over row in table User clicks a row in table Button can toggle row click highlighting Button clears all click highlights Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company

Hiding and Showing Content • Can animate appearance and disappearance of content  Avoids sudden jarring changes to page  Don’t have to last long

• Two types of methods  Dedicated animation methods  Methods that animate incidentally

Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company

The animate Method • All animation methods so far have been focused  Some flexibility, but not much

• When other methods fall short, use animate()  All other animation methods use this one  Method is flexible and customizable  Will have to do some work

• Works by letting you set targets for CSS properties  Starts at current calculated value  Transitions to the new value

• Perform singly or chain together Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company

Forms of animate() • Pass a JavaScript object literal  .animate( properties, [duration], [easing], [complete] )

• Pass properties and options  .animate( properties, options )

• Properties is the only required argument  Default values are pixels (px), but em and % work  Can animate a few non CSS properties  Make relative changes with += and -=

Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company

Limitations to animate() • Can only set single numeric CSS properties • Doesn’t support shorthand CSS properties • Multiword property names must be camel cased  backgroundColor  borderRight

Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company

The jQuery User Interface Library • Makes use of CSS-based themes • Easy to see why Microsoft adopted jQuery!  No brainer to also embrace jQuery UI

Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company

Downloading the jQuery UI Library • Huge library if you include every feature  Split into many files  Use whatever you need

• Can customize the library download

Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company

Creating a jQuery UI Library Theme • Highly unlikely that standard themes will work for you perfectly  CSS files are fairly complex, so hard to create from scratch  May just need to tweak a standard theme  Use the ThemeRoller tool

Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company

Learn More!

• This is an excerpt from a larger course. Visit www.learnnowonline.com for the full details!

• Learn more about jQuery on SlideShare!  The jQuery Library

Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company