by Ronald Lopez and Bryan Cabalo

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: •  YUI - Yahoo! User Interface library •  digit - Dojo User Interface library •  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] ) • effect • 'blind', 'bounce', 'clip', 'drop', 'explode', 'fold', 'highlight', 'puff', 'pulsate', 'scale', 'shake', 'size', 'slide', 'transfer'. • options •  http://docs.jquery.com/UI/Effects/ • speed •  "slow", "normal", or "fast" or # of milliseconds • callback • function called after effect is completed

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

8.     Themable widgets • Date picker      $('#date').datepicker();     <input type="text" name="date" id="date" />

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

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+  • Must load jQuery before loading jQuery UI <link type="text/css" href="css/themename/jquery-ui-1.8.13.custom.css" rel="Stylesheet" />    <script type="text/javascript" src="js/jquery-1.4.4.min.js"></script><script type="text/javascript" src="js/jquery-ui-1.8.13.custom.min.js"></script> • 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 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.13/jquery-ui.js"></script> <script src="./jquery-1.6.1.min.js"></script>   • 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/