jQuery<br />Inspiration for webdesigners.<br />
jQuery<br />Inspiration for webdesigners.<br />jQuery Code<br />jQuery UI<br />jQuery voorbeelden<br />
jQuery<br />Inspiration for webdesigners.<br />jQuery code<br /><ul><li>Geen javascript code meer in de html (Unobtrusive ...
 Write less, do more!
Selectors: de manier waarop je een element aanroept
Events: de reden om iets met een element te doen
Manipulation: wat je met het element gaat doen
eenvoudige html/css aanpassingen
effecten en animaties</li></li></ul><li>jQuery<br />Inspiration for webdesigners.<br />jQuery code: unobtrusive<br />Vroeg...
 meer code die minder doet
 conflicten en fouten in verschillende browsers</li></li></ul><li>jQuery<br />Inspiration for webdesigners.<br />jQuery co...
jQuery<br />Inspiration for webdesigners.<br />jQuery code: unobtrusive<br />Unobtrusive DOM manier van javascript in html...
jQuery<br />Inspiration for webdesigners.<br />jQuery code: unobtrusive<br />Unobtrusive DOM manier van javascript in html...
jQuery<br />Inspiration for webdesigners.<br />jQuery code: unobtrusive<br />Unobtrusive DOM manier van javascript in html...
jQuery<br />Inspiration for webdesigners.<br />jQuery code: unobtrusive<br />Unobtrusive DOM manier van javascript in html...
jQuery<br />Inspiration for webdesigners.<br />jQuery code slider code<br />
jQuery<br />Inspiration for webdesigners.<br />jQuery UI<br /><ul><li>Schaalbare extensie van jQuery
 Low-level interacties & high-level skinable widgets.
Browseronafhankelijk</li></li></ul><li>jQuery<br />Inspiration for webdesigners.<br />jQuery UI onderdelen<br /><ul><li> C...
 Effecten
 Interacties
 Widgets</li></li></ul><li>jQuery<br />Inspiration for webdesigners.<br />jQuery UI core<br /><ul><li>show(speed)
hide(speed)
toggle(speed)
slide(speed)
Upcoming SlideShare
Loading in...5
×

Jquery presentatie

1,284

Published on

0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

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

No notes for slide

Jquery presentatie

  1. 1. jQuery<br />Inspiration for webdesigners.<br />
  2. 2. jQuery<br />Inspiration for webdesigners.<br />jQuery Code<br />jQuery UI<br />jQuery voorbeelden<br />
  3. 3. jQuery<br />Inspiration for webdesigners.<br />jQuery code<br /><ul><li>Geen javascript code meer in de html (Unobtrusive javascript)
  4. 4. Write less, do more!
  5. 5. Selectors: de manier waarop je een element aanroept
  6. 6. Events: de reden om iets met een element te doen
  7. 7. Manipulation: wat je met het element gaat doen
  8. 8. eenvoudige html/css aanpassingen
  9. 9. effecten en animaties</li></li></ul><li>jQuery<br />Inspiration for webdesigners.<br />jQuery code: unobtrusive<br />Vroegere manier van javascript in html:<br />Content<br />Behavior<br />Presentation<br />index.html<br />functies.js<br />style.css<br />inline javascript<br />Nadelen:<br /><ul><li> veel werk om te implementeren en aan te passen
  10. 10. meer code die minder doet
  11. 11. conflicten en fouten in verschillende browsers</li></li></ul><li>jQuery<br />Inspiration for webdesigners.<br />jQuery code: unobtrusive<br />Vroegere manier van javascript in html:<br /><html><head> <script ><br /> // javascript code die bepaalt wat de functies doen<br /> </script></head><body onload=’javascriptFunctie1();’ > <img src=’image.jpg’ onclick=’javascript:javascriptFunctie2();‘ /> <script>javascriptFunctie3(); </script></body><br />
  12. 12. jQuery<br />Inspiration for webdesigners.<br />jQuery code: unobtrusive<br />Unobtrusive DOM manier van javascript in html met jQuery:<br />Content<br />Behavior<br />Presentation<br />
  13. 13. jQuery<br />Inspiration for webdesigners.<br />jQuery code: unobtrusive<br />Unobtrusive DOM manier van javascript in html met jQuery:<br />Content<br />Behavior<br />Presentation<br />index.html<br />library.js<br />style.css<br />custom.js<br />
  14. 14. jQuery<br />Inspiration for webdesigners.<br />jQuery code: unobtrusive<br />Unobtrusive DOM manier van javascript in html met jQuery:<br /><html><head><br /> <script src=’pad/naar/jQuery.js’ /><br /> <script src=’pad/naar/custom.js’ /> </head><body> <img src=’image.jpg’/></body><br />
  15. 15. jQuery<br />Inspiration for webdesigners.<br />jQuery code: unobtrusive<br />Unobtrusive DOM manier van javascript in html met jQuery:<br />$(document).ready(function(){javascriptFunctie1();javascriptFunctie3();$(‘img’).click(javascriptFunctie2());})<br />
  16. 16. jQuery<br />Inspiration for webdesigners.<br />jQuery code slider code<br />
  17. 17. jQuery<br />Inspiration for webdesigners.<br />jQuery UI<br /><ul><li>Schaalbare extensie van jQuery
  18. 18. Low-level interacties & high-level skinable widgets.
  19. 19. Browseronafhankelijk</li></li></ul><li>jQuery<br />Inspiration for webdesigners.<br />jQuery UI onderdelen<br /><ul><li> Core
  20. 20. Effecten
  21. 21. Interacties
  22. 22. Widgets</li></li></ul><li>jQuery<br />Inspiration for webdesigners.<br />jQuery UI core<br /><ul><li>show(speed)
  23. 23. hide(speed)
  24. 24. toggle(speed)
  25. 25. slide(speed)
  26. 26. fade(speed)
  27. 27. animate(parameters*, duration, easing**)</li></ul>* css-regels die worden geanimeerd<br />** deze zijn vergelijkbaar met de easing die wordt gebruikt bij flash animaties<br />
  28. 28. jQuery<br />Inspiration for webdesigners.<br />jQuery UI effecten<br /><ul><li>Blind
  29. 29. Bounce
  30. 30. Clip
  31. 31. Drop
  32. 32. Explode
  33. 33. Fold
  34. 34. Highlight
  35. 35. Pulsate
  36. 36. Scale
  37. 37. Shake
  38. 38. Slide
  39. 39. Transfer</li></li></ul><li>jQuery<br />Inspiration for webdesigners.<br />jQuery UI interacties<br /><ul><li> Drag
  40. 40. Drop
  41. 41. Resizable
  42. 42. Selectable
  43. 43. Sortable</li></li></ul><li>jQuery<br />Inspiration for webdesigners.<br />jQuery UI skinable widgets<br /><ul><li> Accordion
  44. 44. Autocomplete
  45. 45. Colorpicker
  46. 46. Dialog
  47. 47. Slider
  48. 48. Tabs
  49. 49. Datepicker
  50. 50. Magnifier
  51. 51. Progressbar
  52. 52. Spinner</li></li></ul><li>jQuery<br />Inspiration for webdesigners.<br />jQuery GetGlue.com<br /><ul><li> Image preloading
  53. 53. Sliding
  54. 54. Fading
  55. 55. Hiding
  56. 56. ...</li></li></ul><li>jQuery<br />Inspiration for webdesigners.<br />Prototype Wax.be<br /><ul><li> Sliding
  57. 57. Form validation
  58. 58. ...</li></li></ul><li>jQuery<br />Inspiration for webdesigners.<br />Prototype Pioneer.eu<br /><ul><li> Sliding
  59. 59. Accordion</li></li></ul><li>jQuery<br />Inspiration for webdesigners.<br />jQuery Twootball.com<br /><ul><li> Overlay
  60. 60. Ajax</li></li></ul><li>jQuery<br />Inspiration for webdesigners.<br />jQuery wp.desingisdead.be<br /><ul><li> Lightbox
  61. 61. CSS tweaking</li></li></ul><li>jQuery<br />Inspiration for webdesigners.<br />jQuery Zemanta.com<br /><ul><li> Sliding
  62. 62. Fading
  63. 63. ...</li></li></ul><li>jQuery<br />Inspiration for webdesigners.<br />jQuery Bornliving.com<br /><ul><li> Sliding
  64. 64. CSS checking</li></li></ul><li>jQuery<br />Inspiration for webdesigners.<br />jQuery suiepaparude.ro<br /><ul><li>Page sliding
  65. 65. Effects</li></li></ul><li>jQuery<br />Inspiration for webdesigners.<br />jQuery Cesserdigital.net<br /><ul><li> full interface manipulation</li>
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×