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 pages 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 cant do it, use CSS 3. If CSS cant do it, use jQuery

Design with progressive enhancement Well 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 youll 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

Dont 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 Dont 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 Doesnt 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