Jquery presentatie
Upcoming SlideShare
Loading in...5
×
 

Jquery presentatie

on

  • 1,427 views

 

Statistics

Views

Total Views
1,427
Views on SlideShare
1,426
Embed Views
1

Actions

Likes
1
Downloads
10
Comments
0

1 Embed 1

http://www.linkedin.com 1

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