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
http://www.google.com/trends?q=jQuery+UI%2C+prototype+UI
%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
o
o
o
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
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();
<input type="text" name="date" id="date" />
Themable widgets
Autocomplete
o http://jqueryui.com/demos/autocomplete/
var availableTags = [ "ActionScript",
"AppleScript",
"Asp",
"BASIC",
"C",
"C++" ];
$( "#tags" ).autocomplete({ source: availableTags });
<input type="text" id="tags" />
Theme Roller
Create themed widget for each jQuery UI widget
http://jqueryui.com/themeroller/
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
<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.
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
References
http://jqueryui.com/
http://docs.jquery.com/UI/Effects/
http://jqueryui.com/themeroller/
