Bring a Web Page Alive with jQuery

1,692 views

Published on

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,692
On SlideShare
0
From Embeds
0
Number of Embeds
4
Actions
Shares
0
Downloads
0
Comments
0
Likes
2
Embeds 0
No embeds

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
  • Bring a Web Page Alive with jQuery

    1. 1. Bring a Web Page Alive withjQuery Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    2. 2. Objectives Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    3. 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. 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. 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. 6. Introduction Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    7. 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. 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. 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. 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. 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. 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. 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. 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. 15. Work with Page Elements Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    16. 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. 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. 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. 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. 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. 21. Hiding and Showing Page Elements Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    22. 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. 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. 24. Changing Element Content Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    25. 25. Changing Element Content • Not limited to changing appearance Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    26. 26. Changing Element Content • Not limited to changing appearance  text method Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    27. 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. 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. 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. 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. 31. Adding and Removing Page Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    32. 32. Adding and Removing Page • Can dynamically add and remove elements Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    33. 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. 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. 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. 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. 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. 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. 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. 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. 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. 42. Use Animations and Effects Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    43. 43. Use Animations and Effects • DOM enables dynamic effects Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    44. 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. 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. 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. 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. 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. 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. 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. 51. Hovering Effects Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    52. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 62. Hiding and Showing Content Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    63. 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. 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. 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. 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. 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. 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. 69. The animate Method Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    70. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 80. Forms of animate() Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    81. 81. Forms of animate() • Pass a JavaScript object literal Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    82. 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. 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. 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. 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. 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. 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. 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. 89. Limitations to animate() Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    90. 90. Limitations to animate() • Can only set single numeric CSS properties Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    91. 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. 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. 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. 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. 95. The jQuery User Interface Library Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    96. 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. 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. 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. 99. Downloading the jQuery UI Library Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    100. 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. 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. 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. 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. 104. Creating a jQuery UI Library Theme Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    105. 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. 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. 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. 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. 109. Learn More! Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    110. 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. 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. 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. 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

    ×