Your SlideShare is downloading. ×
Bring a Web Page Alive with jQuery
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Bring a Web Page Alive with jQuery

1,488
views

Published on

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

Learn about how you can use jQuery to change Web page content and structure and
use animation to make a page come alive.

Published in: Education, Technology, Design

0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
1,488
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
0
Comments
0
Likes
2
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • Demo: rest of section, Inspecting Results with Firebug, \n
  • Demo: rest of section, Inspecting Results with Firebug, \n
  • Demo: rest of section, Inspecting Results with Firebug, \n
  • Demo: rest of section, Inspecting Results with Firebug, \n
  • Demo: rest of section, Inspecting Results with Firebug, \n
  • DEMO: rest of section\n
  • DEMO: rest of section\n
  • DEMO: rest of section\n
  • DEMO: rest of section\n
  • DEMO: rest of section\n
  • DEMO: rest of section\n
  • DEMO: rest of section\n
  • DEMO: rest of section\n
  • DEMO: rest of section\n
  • DEMO: rest of section\n
  • DEMO: rest of section\n
  • DEMO: rest of section\n
  • DEMO: rest of section\n
  • DEMO: rest of section\n
  • DEMO: rest of section\n
  • DEMO: rest of section\n
  • DEMO: rest of section\n
  • DEMO: rest of section\n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • DEMO: rest of section\n
  • DEMO: rest of section\n
  • DEMO: rest of section\n
  • DEMO: rest of section\n
  • DEMO: rest of section\n
  • DEMO: rest of section\n
  • DEMO: rest of section\n
  • DEMO: rest of section\n
  • DEMO: rest of section\n
  • DEMO: rest of section\n
  • DEMO: rest of section, Fading Text In and Out, Toggling Appearance, Hide or Show Content, Execute Code When Animation Completes, Chaining Animations Together, \n
  • DEMO: rest of section, Fading Text In and Out, Toggling Appearance, Hide or Show Content, Execute Code When Animation Completes, Chaining Animations Together, \n
  • DEMO: rest of section, Fading Text In and Out, Toggling Appearance, Hide or Show Content, Execute Code When Animation Completes, Chaining Animations Together, \n
  • DEMO: rest of section, Fading Text In and Out, Toggling Appearance, Hide or Show Content, Execute Code When Animation Completes, Chaining Animations Together, \n
  • DEMO: rest of section, Fading Text In and Out, Toggling Appearance, Hide or Show Content, Execute Code When Animation Completes, Chaining Animations Together, \n
  • DEMO: rest of section, Fading Text In and Out, Toggling Appearance, Hide or Show Content, Execute Code When Animation Completes, Chaining Animations Together, \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • DEMO: rest of section\n
  • DEMO: rest of section\n
  • DEMO: rest of section\n
  • DEMO: rest of section\n
  • DEMO: rest of section\n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • DEMO: rest of section, Exploring the jQuery UI Library\n
  • DEMO: rest of section, Exploring the jQuery UI Library\n
  • DEMO: rest of section, Exploring the jQuery UI Library\n
  • DEMO: rest of section, Exploring the jQuery UI Library\n
  • DEMO: rest of section\n
  • DEMO: rest of section\n
  • DEMO: rest of section\n
  • DEMO: rest of section\n
  • Transcript

    • 1. Bring a Web Page Alive withjQuery Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    • 2. Objectives Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    • 3. Objectives • Learn about how you can use jQuery to change Web page content and structure Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    • 4. 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 Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    • 5. 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
    • 6. Introduction Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    • 7. Introduction • Once you know the basics of jQuery, there are many ways to put it to use Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    • 8. 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 Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    • 9. 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: Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    • 10. 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 Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    • 11. 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 Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    • 12. 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 Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    • 13. 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 Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    • 14. 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
    • 15. Work with Page Elements Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    • 16. Work with Page Elements • Probably the most common thing you’ll do Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    • 17. Work with Page Elements • Probably the most common thing you’ll do  Make changes based on user or environment Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    • 18. Work with Page Elements • Probably the most common thing you’ll do  Make changes based on user or environment • Manipulating CSS with jQuery Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    • 19. 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 Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    • 20. 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
    • 21. Hiding and Showing Page Elements Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    • 22. Hiding and Showing Page Elements • Use the show, hide, and toggle methods Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    • 23. 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
    • 24. Changing Element Content Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    • 25. Changing Element Content • Not limited to changing appearance Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    • 26. Changing Element Content • Not limited to changing appearance  text method Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    • 27. Changing Element Content • Not limited to changing appearance  text method  html method Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    • 28. Changing Element Content • Not limited to changing appearance  text method  html method  val method Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    • 29. 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 Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    • 30. 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
    • 31. Adding and Removing Page Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    • 32. Adding and Removing Page • Can dynamically add and remove elements Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    • 33. Adding and Removing Page • Can dynamically add and remove elements  Rewrite the page on the fly with jQuery Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    • 34. Adding and Removing Page • Can dynamically add and remove elements  Rewrite the page on the fly with jQuery  Possible in JavaScript, but hard Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    • 35. 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 Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    • 36. 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 Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    • 37. 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 Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    • 38. 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  insertBefore and insertAfter methods Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    • 39. 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  insertBefore and insertAfter methods  prependTo and appendTo methods Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    • 40. 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  insertBefore and insertAfter methods  prependTo and appendTo methods  remove method Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    • 41. 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  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
    • 42. Use Animations and Effects Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    • 43. Use Animations and Effects • DOM enables dynamic effects Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    • 44. Use Animations and Effects • DOM enables dynamic effects  JavaScript makes it all possible Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    • 45. Use Animations and Effects • DOM enables dynamic effects  JavaScript makes it all possible  But can be overwhelming Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    • 46. Use Animations and Effects • DOM enables dynamic effects  JavaScript makes it all possible  But can be overwhelming • Perfect task for jQuery Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    • 47. 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 Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    • 48. 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 Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    • 49. 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 Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    • 50. 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
    • 51. Hovering Effects Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    • 52. Hovering Effects • Commonly need to change appearance when mouse hovers over an element Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    • 53. Hovering Effects • Commonly need to change appearance when mouse hovers over an element • Several methods Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    • 54. Hovering Effects • Commonly need to change appearance when mouse hovers over an element • Several methods  mouseover and mouseout methods Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    • 55. Hovering Effects • Commonly need to change appearance when mouse hovers over an element • Several methods  mouseover and mouseout methods  mousedown and mouseup methods Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    • 56. 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 Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    • 57. 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 Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    • 58. 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 Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    • 59. 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 Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    • 60. 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 Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    • 61. 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
    • 62. Hiding and Showing Content Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    • 63. Hiding and Showing Content • Can animate appearance and disappearance of content Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    • 64. Hiding and Showing Content • Can animate appearance and disappearance of content  Avoids sudden jarring changes to page Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    • 65. Hiding and Showing Content • Can animate appearance and disappearance of content  Avoids sudden jarring changes to page  Don’t have to last long Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    • 66. 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 Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    • 67. 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 Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    • 68. 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
    • 69. The animate Method Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    • 70. The animate Method • All animation methods so far have been focused Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    • 71. The animate Method • All animation methods so far have been focused  Some flexibility, but not much Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    • 72. The animate Method • All animation methods so far have been focused  Some flexibility, but not much • When other methods fall short, use animate() Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    • 73. 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 Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    • 74. 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 Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    • 75. 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 Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    • 76. 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 Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    • 77. 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 Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    • 78. 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 Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    • 79. 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
    • 80. Forms of animate() Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    • 81. Forms of animate() • Pass a JavaScript object literal Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    • 82. Forms of animate() • Pass a JavaScript object literal  .animate( properties, [duration], [easing], [complete] ) Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    • 83. Forms of animate() • Pass a JavaScript object literal  .animate( properties, [duration], [easing], [complete] ) • Pass properties and options Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    • 84. Forms of animate() • Pass a JavaScript object literal  .animate( properties, [duration], [easing], [complete] ) • Pass properties and options  .animate( properties, options ) Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    • 85. 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 Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    • 86. 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 Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    • 87. 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 Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    • 88. 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
    • 89. Limitations to animate() Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    • 90. Limitations to animate() • Can only set single numeric CSS properties Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    • 91. Limitations to animate() • Can only set single numeric CSS properties • Doesn’t support shorthand CSS properties Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    • 92. Limitations to animate() • Can only set single numeric CSS properties • Doesn’t support shorthand CSS properties • Multiword property names must be camel cased Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    • 93. Limitations to animate() • Can only set single numeric CSS properties • Doesn’t support shorthand CSS properties • Multiword property names must be camel cased  backgroundColor Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    • 94. 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
    • 95. The jQuery User Interface Library Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    • 96. The jQuery User Interface Library • Makes use of CSS-based themes Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    • 97. The jQuery User Interface Library • Makes use of CSS-based themes • Easy to see why Microsoft adopted jQuery! Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    • 98. 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
    • 99. Downloading the jQuery UI Library Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    • 100. Downloading the jQuery UI Library • Huge library if you include every feature Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    • 101. Downloading the jQuery UI Library • Huge library if you include every feature  Split into many files Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    • 102. Downloading the jQuery UI Library • Huge library if you include every feature  Split into many files  Use whatever you need Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    • 103. 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
    • 104. Creating a jQuery UI Library Theme Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    • 105. Creating a jQuery UI Library Theme • Highly unlikely that standard themes will work for you perfectly Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    • 106. 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 Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    • 107. 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 Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    • 108. 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
    • 109. Learn More! Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    • 110. Learn More!• This is an excerpt from a larger course. Visit www.learnnowonline.com for the full details! Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    • 111. Learn More!• This is an excerpt from a larger course. Visit www.learnnowonline.com for the full details! Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    • 112. Learn More!• This is an excerpt from a larger course. Visit www.learnnowonline.com for the full details!• Learn more about jQuery on SlideShare! Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    • 113. 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