1. by Ronald Lopez and Bryan Cabalo

2. Outline jQuery UI overview Animation and special effects Themable widgets Versions and browser compatibility jQuery UI demo

3. jQuery UI - Overview Provides abstractions for low-level interaction and animation, advanced effects and high-level, themeable widgets Built on top of the jQuery JavaScript Library Used to build highly interactive web applications One of a few other javascript UI libraries: o YUI - Yahoo! User Interface library o digit - Dojo User Interface library o Protoype UI

4. Google trends http://www.google.com/trends?q=jQuery+UI%2C+prototype+UI %2C+YUI%2C+digit

5. Special effects - animation Basic effect transition Visibility transition Color transition Class transition Advanced easing

6. Basic effect transition Call effect on any DOM element.effect( effect, [options], [speed], [callback] ) o effect  'blind', 'bounce', 'clip', 'drop', 'explode', 'fold', 'highlight', 'puff', 'pulsate', 'scale', 'shake', 'size', 'slide', 'transfer'. o options  http://docs.jquery.com/UI/Effects/ o speed  "slow", "normal", or "fast" or # of milliseconds o callback  function called after effect is completed

7. Visibility transition Show o jQuery show: .show([duration],[easing],[callback]) o jQuery UI .show(effect,[options], [speed], [callback]) Hide o.hide(effect,[options], [speed], [callback]) Toggle o.toggle(effect,[options], [speed], [callback])

8. Themable widgets Date picker $('#date').datepicker();

9. Themable widgets Autocomplete o http://jqueryui.com/demos/autocomplete/ var availableTags = [ "ActionScript", "AppleScript", "Asp", "BASIC", "C", "C++" ]; $( "#tags" ).autocomplete({ source: availableTags });

10. Theme Roller Create themed widget for each jQuery UI widget http://jqueryui.com/themeroller/

11. jQuery UI versions jQuery UI 1.8.13: Works with jQuery 1.3.2+ jQuery UI 1.7.2: Works with jQuery 1.3.2+ o Must load jQuery before loading jQuery UI All plugins are tested for compatibility in IE 6.0+, Firefox 3+, Safari 3.1+, Opera 9.6+, and Google Chrome.

12. jQuery UI demo http://ecs.fullerton.edu/~cs531s20/Controls.html http://ecs.fullerton.edu/~cs531s20/Animations.html

13. References http://jqueryui.com/ http://docs.jquery.com/UI/Effects/ http://jqueryui.com/themeroller/