jquery presentatie
TRANSCRIPT
jQueryInspiration 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
jQueryInspiration for webdesigners.
jQuery code: unobtrusive
Vroegere manier van javascript in html:
Content BehaviorPresentation
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
jQueryInspiration 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>
jQueryInspiration for webdesigners.
jQuery code: unobtrusive
Unobtrusive DOM manier van javascript in html met jQuery:
Content BehaviorPresentation
jQueryInspiration for webdesigners.
jQuery code: unobtrusive
Unobtrusive DOM manier van javascript in html met jQuery:
Content BehaviorPresentation
index.html
library.js
style.css
custom.js
jQueryInspiration 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>
jQueryInspiration for webdesigners.
jQuery code: unobtrusive
Unobtrusive DOM manier van javascript in html met jQuery:
$(document).ready(function(){javascriptFunctie1();javascriptFunctie3();$(‘img’).click(javascriptFunctie2());
})
jQueryInspiration for webdesigners.
jQuery UI
• Schaalbare extensie van jQuery
• Low-level interacties & high-level skinable widgets.
• Browseronafhankelijk
jQueryInspiration 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
jQueryInspiration for webdesigners.
jQuery UI effecten
• Blind
• Bounce
• Clip
• Drop
• Explode
• Fold
• Highlight
• Pulsate
• Scale
• Shake
• Slide
• Transfer
jQueryInspiration for webdesigners.
jQuery UI interacties
• Drag
• Drop
• Resizable
• Selectable
• Sortable
jQueryInspiration for webdesigners.
jQuery UI skinable widgets
• Accordion
• Autocomplete
• Colorpicker
• Dialog
• Slider
• Tabs
• Datepicker
• Magnifier
• Progressbar
• Spinner
jQueryInspiration for webdesigners.
jQuery GetGlue.com
• Image preloading
• Sliding
• Fading
• Hiding
• ...