by Ronald Lopez and Bryan Cabalo

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

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

Google trends %2C+YUI%2C+digit

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

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  o speed  "slow", "normal", or "fast" or # of milliseconds o callback  function called after effect is completed

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

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

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

Theme Roller Create themed widget for each jQuery UI widget

jQuery UI versions jQuery UI : Works with jQuery jQuery UI 1.7.2: Works with jQuery 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.

jQuery UI demo

References