Jquery presentatie

jQueryInspiration for webdesigners.


1. jQuery Code2. jQuery UI3. jQuery voorbeelden


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 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



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>



Unobtrusive DOM manier van javascript in html met jQuery:






index.html

library.js

style.css

custom.js




$(document).ready(function(){javascriptFunctie1();javascriptFunctie3();$(‘img’).click(javascriptFunctie2());

})


jQuery code slider code


jQuery UI

• Schaalbare extensie van jQuery

• Low-level interacties & high-level skinable widgets.

• Browseronafhankelijk


jQuery UI onderdelen

• Core

• Effecten

• Interacties

• Widgets


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 UI effecten

• Blind

• Bounce

• Clip

• Drop

• Explode

• Fold

• Highlight

• Pulsate

• Scale

• Shake

• Slide

• Transfer


jQuery UI interacties

• Drag

• Drop

• Resizable

• Selectable

• Sortable


jQuery UI skinable widgets

• Accordion

• Autocomplete

• Colorpicker

• Dialog

• Slider

• Tabs

• Datepicker

• Magnifier

• Progressbar

• Spinner


jQuery GetGlue.com

• Image preloading

• Sliding

• Fading

• Hiding

• ...


Prototype Wax.be

• Sliding

• Form validation

• ...


Prototype Pioneer.eu

• Sliding

• Accordion


jQuery Twootball.com

• Overlay

• Ajax


jQuery wp.desingisdead.be

• Lightbox

• CSS tweaking


jQuery Zemanta.com

• Sliding

• Fading

• ...


jQuery Bornliving.com

• Sliding

• CSS checking


jQuery suiepaparude.ro

• Page sliding

• Effects


jQuery Cesserdigital.net

• full interface

manipulation

Jquery presentatie

Technology

Transcript of Jquery presentatie