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


Objectives
• Learn about how you can use jQuery to change
Web page content and structure


Objectives
• See how you can use jQuery animations to make
a page come alive and enhance its usability


Objectives
• 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


Introduction


Introduction
• Once you know the basics of jQuery, there are
many ways to put it to use


Introduction
• Need to find a balance between using HTML/CSS
and jQuery


Introduction
and jQuery
• In general, to implement a design feature:


Introduction
and jQuery
1. Use HTML when you can


Introduction
and jQuery
2. If HTML can’t do it, use CSS


Introduction
and jQuery
3. If CSS can’t do it, use jQuery


Introduction
and jQuery
• Design with progressive enhancement


Introduction
and jQuery
• Design with progressive enhancement
• We’ll go beyond HTML and CSS here

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


 Read and write CSS properties
 Add and remove CSS classes


Hiding and Showing Page Elements



• Use the show, hide, and toggle methods



• Use the show, hide, and toggle methods
• Works by setting CSS display property


Changing Element Content


• Not limited to changing appearance


 text method


 text method
 html method


 text method
 html method
 val method


 text method
 html method
 val method
• When used to read content, get content only
from first element in matched set


 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


Adding and Removing Page


• 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


• Methods
 insertBefore and insertAfter methods


• Methods
 prependTo and appendTo methods


• Methods
 remove method


• Methods
 remove method
• Changes only the in-memory DOM

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


 Remember that there are extensions
• Don’t get carried away!


Hovering Effects


Hovering Effects
• Commonly need to change appearance when mouse
hovers over an element


Hovering Effects
• Several methods


Hovering Effects
• Several methods
 mouseover and mouseout methods


Hovering Effects
• Several methods
 mousedown and mouseup methods


Hovering Effects
• Several methods
 mouseenter and mouseleave methods


Hovering Effects
• Several methods
• Sample page


Hovering Effects
• Several methods
• Sample page
 Mouse over row in table


Hovering Effects
• Several methods
• Sample page
 User clicks a row in table


Hovering Effects
• Several methods
• Sample page
 Button can toggle row click highlighting


Hovering Effects
• Several methods
• Sample page
 Button can toggle row click highlighting
 Button clears all click highlights


Hiding and Showing Content


• Can animate appearance and disappearance of
content


content
 Avoids sudden jarring changes to page


content
 Don’t have to last long


content
• Two types of methods


content
 Dedicated animation methods


content
 Dedicated animation methods
 Methods that animate incidentally


The animate Method


The animate Method

• All animation methods so far have been focused


The animate Method

 Some flexibility, but not much


The animate Method

• When other methods fall short, use animate()


The animate Method

 All other animation methods use this one


The animate Method

 Method is flexible and customizable


The animate Method

 Will have to do some work


The animate Method

• Works by letting you set targets for CSS properties


The animate Method

 Starts at current calculated value


The animate Method

 Transitions to the new value


The animate Method

 Transitions to the new value
• Perform singly or chain together


Forms of animate()


Forms of animate()
• Pass a JavaScript object literal


Forms of animate()
 .animate( properties, [duration],
[easing], [complete] )


Forms of animate()
• Pass properties and options


Forms of animate()
 .animate( properties, options )


Forms of animate()
• Properties is the only required argument


Forms of animate()
 Default values are pixels (px), but em and % work


Forms of animate()
 Can animate a few non CSS properties


Forms of animate()
 Can animate a few non CSS properties
 Make relative changes with += and -=


Limitations to animate()



• Can only set single numeric CSS properties



• Doesn’t support shorthand CSS properties



• Multiword property names must be camel cased



 backgroundColor



 backgroundColor
 borderRight


The jQuery User Interface Library



• Makes use of CSS-based themes



• Easy to see why Microsoft adopted jQuery!



• Easy to see why Microsoft adopted jQuery!
 No brainer to also embrace jQuery UI


Downloading the jQuery UI Library



• Huge library if you include every feature



 Split into many files



 Use whatever you need



 Use whatever you need
• Can customize the library download


Creating a jQuery UI Library Theme



• Highly unlikely that standard themes will work
for you perfectly



for you perfectly
 CSS files are fairly complex, so hard to create from
scratch



for you perfectly
scratch
 May just need to tweak a standard theme



for you perfectly
scratch
 May just need to tweak a standard theme
 Use the ThemeRoller tool


Learn More!


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


Learn More!

• Learn more about jQuery on SlideShare!


Learn More!

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


Bring a Web Page Alive with jQuery

Recomendados

Recomendados

Más contenido relacionado

La actualidad más candente

La actualidad más candente (20)

Destacado

Destacado (20)

Similar a Bring a Web Page Alive with jQuery

Similar a Bring a Web Page Alive with jQuery (20)

Más de LearnNowOnline

Más de LearnNowOnline (12)

Último

Último (20)

Bring a Web Page Alive with jQuery

Notas del editor