• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Jquery presentatie
 

Jquery presentatie

on

  • 1,801 views

 

Statistics

Views

Total Views
1,801
Views on SlideShare
1,801
Embed Views
0

Actions

Likes
0
Downloads
25
Comments
0

0 Embeds 0

No embeds

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    Jquery presentatie Jquery presentatie Presentation Transcript

    • jQuery
      Inspiration for webdesigners.
    • jQuery
      Inspiration for webdesigners.
      jQuery Code
      jQuery UI
      jQuery voorbeelden
    • jQuery
      Inspiration for webdesigners.
      jQuery code
      • Geen javascript code meer in de html (Unobtrusive javascript)
      • 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
    • jQuery
      Inspiration for webdesigners.
      jQuery code: unobtrusive
      Vroegere manier van javascript in html:
      Content
      Behavior
      Presentation
      index.html
      functies.js
      style.css
      inline javascript
      Nadelen:
      • veel werk om te implementeren en aan te passen
      • meer code die minder doet
      • conflicten en fouten in verschillende browsers
    • jQuery
      Inspiration for webdesigners.
      jQuery code: unobtrusive
      Vroegere manier van javascript in html:
      <html><head> <script >
      // javascript code die bepaalt wat de functies doen
      </script></head><body onload=’javascriptFunctie1();’ > <img src=’image.jpg’ onclick=’javascript:javascriptFunctie2();‘ /> <script>javascriptFunctie3(); </script></body>
    • jQuery
      Inspiration for webdesigners.
      jQuery code: unobtrusive
      Unobtrusive DOM manier van javascript in html met jQuery:
      Content
      Behavior
      Presentation
    • jQuery
      Inspiration for webdesigners.
      jQuery code: unobtrusive
      Unobtrusive DOM manier van javascript in html met jQuery:
      Content
      Behavior
      Presentation
      index.html
      library.js
      style.css
      custom.js
    • jQuery
      Inspiration for webdesigners.
      jQuery code: unobtrusive
      Unobtrusive DOM manier van javascript in html met jQuery:
      <html><head>
      <script src=’pad/naar/jQuery.js’ />
      <script src=’pad/naar/custom.js’ /> </head><body> <img src=’image.jpg’/></body>
    • jQuery
      Inspiration for webdesigners.
      jQuery code: unobtrusive
      Unobtrusive DOM manier van javascript in html met jQuery:
      $(document).ready(function(){javascriptFunctie1();javascriptFunctie3();$(‘img’).click(javascriptFunctie2());})
    • jQuery
      Inspiration for webdesigners.
      jQuery code slider code
    • jQuery
      Inspiration for webdesigners.
      jQuery UI
      • Schaalbare extensie van jQuery
      • Low-level interacties & high-level skinable widgets.
      • Browseronafhankelijk
    • jQuery
      Inspiration for webdesigners.
      jQuery UI onderdelen
      • Core
      • Effecten
      • Interacties
      • Widgets
    • jQuery
      Inspiration for webdesigners.
      jQuery UI core
      • show(speed)
      • hide(speed)
      • toggle(speed)
      • slide(speed)
      • fade(speed)
      • animate(parameters*, duration, easing**)
      * css-regels die worden geanimeerd
      ** deze zijn vergelijkbaar met de easing die wordt gebruikt bij flash animaties
    • jQuery
      Inspiration for webdesigners.
      jQuery UI effecten
      • Blind
      • Bounce
      • Clip
      • Drop
      • Explode
      • Fold
      • Highlight
      • Pulsate
      • Scale
      • Shake
      • Slide
      • Transfer
    • jQuery
      Inspiration for webdesigners.
      jQuery UI interacties
      • Drag
      • Drop
      • Resizable
      • Selectable
      • Sortable
    • jQuery
      Inspiration for webdesigners.
      jQuery UI skinable widgets
      • Accordion
      • Autocomplete
      • Colorpicker
      • Dialog
      • Slider
      • Tabs
      • Datepicker
      • Magnifier
      • Progressbar
      • Spinner
    • jQuery
      Inspiration for webdesigners.
      jQuery GetGlue.com
      • Image preloading
      • Sliding
      • Fading
      • Hiding
      • ...
    • jQuery
      Inspiration for webdesigners.
      Prototype Wax.be
      • Sliding
      • Form validation
      • ...
    • jQuery
      Inspiration for webdesigners.
      Prototype Pioneer.eu
      • Sliding
      • Accordion
    • jQuery
      Inspiration for webdesigners.
      jQuery Twootball.com
      • Overlay
      • Ajax
    • jQuery
      Inspiration for webdesigners.
      jQuery wp.desingisdead.be
      • Lightbox
      • CSS tweaking
    • jQuery
      Inspiration for webdesigners.
      jQuery Zemanta.com
      • Sliding
      • Fading
      • ...
    • jQuery
      Inspiration for webdesigners.
      jQuery Bornliving.com
      • Sliding
      • CSS checking
    • jQuery
      Inspiration for webdesigners.
      jQuery suiepaparude.ro
      • Page sliding
      • Effects
    • jQuery
      Inspiration for webdesigners.
      jQuery Cesserdigital.net
      • full interface manipulation