Bring a Web Page Alive with jQuery by LearnNowOnline

VIEWS: 5 PAGES: 17

More Info
									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

								
To top