This is the newly updated in-depth talk about jQuery UI that I gave in Taipeh at the OSDC Taiwan 2009.

1. An in-depth look at
with Paul Bakaus

2. jQuery UI is different.

4. ok, maybe not *that*
different.

6. jQuery UI is..
• build on jQuery
• easy to learn & understand
• unconventional in terms of API design

7. The jQuery UI Stack
Core FX Core
CSS Framework
Interaction Utilities Effects
Widgets

8. Core
(or how to become a jQuery UI Ninja)

9. • Widget factory
• ARIA
• Mouse class
• Utilities
• enable/disable selection
• tabbable/focusable/data selectors
• scroll parent
• key codes

10. The API
How to actually use jQuery UI

11. Initializing
$(...).widgetName(options)

12. Calling individual methods
$(...).widgetName(“methodName“, [arg1, arg2])

13. Manipulating options on-the-fly
$(...).widgetName(“option“, key, value)

14. That‘s it!

15. (Demo)
Easily create new plugins using the widget factory.

16. unsupported!
Modifying a plugin
• Use the (plenty of) callbacks whenever
possible
• Even though the exposed API is jqueryish,
under the hood, it‘s all prototypal
• ..which allows you to get the plugin
instance via $().data(“widgetName“)

17. FX Core
jQuery UI‘s rich effect API

18. Core Effects
1. Call rich effects using
show hide toggle effect
2. Smooth class transitions with
addClass removeClass
toggleClass switchClass

19. „w00t! I know those methods already
from jQuery!

20. CSS Framework
Extended theming capacities

21. The CSS Framework
• Semantic + generic
classes instead of per-
plugin
• Seperation of design and
layout
• Support for CSS Sprites
+ CSS3 corner radius
• Modular and extensible

22. Themeroller
• Design custom themes
• 100% jQuery UI CSS
Framework compatible
• Fun and intuitive UI (No
coding!)
• png8 with alpha
transparency
• Theme Gallery

23. pretty neat but I need
my own styles anyway

24. More power.

25. It‘s not exclusive.
• Uses em‘s for all units
• Scales background
images
• All documented
• Comes with testing &
debugging tools

26. Interaction
Easy to use patterns

27. Drag & Drop

28. • Snapping
Snap to elements with many configurable options
like snapMode, snapTolerance, and snap itself.
Drag & Drop

29. • Snapping
Snap to elements with many configurable options
like snapMode, snapTolerance, and snap itself.
• Stack & Z-Index control
Let jQuery UI control the z-index stack, and define
a z-index which is used during drag.
Drag & Drop

30. • Snapping
Snap to elements with many configurable options
like snapMode, snapTolerance, and snap itself.
• Stack & Z-Index control
Let jQuery UI control the z-index stack, and define
a z-index which is used during drag.
• Relative / Absolute / Fixed
Drag & Drop
jQuery UI will keep your defined css position - it
can handle even relative positions.

31. • Snapping
Snap to elements with many configurable options
like snapMode, snapTolerance, and snap itself.
• Stack & Z-Index control
Let jQuery UI control the z-index stack, and define
a z-index which is used during drag.
• Relative / Absolute / Fixed
Drag & Drop
jQuery UI will keep your defined css position - it
can handle even relative positions.
• Constrain dragging
Drag in one axis, drag in a grid or contain the
element within another element.

32. • Snapping
Snap to elements with many configurable options
like snapMode, snapTolerance, and snap itself.
• Stack & Z-Index control
Let jQuery UI control the z-index stack, and define
a z-index which is used during drag.
• Relative / Absolute / Fixed
Drag & Drop
jQuery UI will keep your defined css position - it
can handle even relative positions.
• Constrain dragging
Drag in one axis, drag in a grid or contain the
element within another element.
• Distance and Delay
Prevent unintended drags by either using a delay or
a defined distance the mouse has to be away.

33. Sorting

34. • Nested sortables
You can nest your HTML structure n-levels deep, and make all
items sortable from one level to another automatically.
Sorting

35. • Nested sortables
You can nest your HTML structure n-levels deep, and make all
items sortable from one level to another automatically.
• Supports the Draggable API
Like a option from Draggables? Use it in Sortables. Most
options are behaving exactly the same and are available on
both. Some examples: Helper creation, scrolling, containment,
distance, delay.
Sorting

36. • Nested sortables
You can nest your HTML structure n-levels deep, and make all
items sortable from one level to another automatically.
• Supports the Draggable API
Like a option from Draggables? Use it in Sortables. Most
options are behaving exactly the same and are available on
both. Some examples: Helper creation, scrolling, containment,
distance, delay.
• Sorting
Connect and serialize
Connect multiple sortable lists and move items from one to
another - serialize the new results and push them to servers.

37. • Nested sortables
You can nest your HTML structure n-levels deep, and make all
items sortable from one level to another automatically.
• Supports the Draggable API
Like a option from Draggables? Use it in Sortables. Most
options are behaving exactly the same and are available on
both. Some examples: Helper creation, scrolling, containment,
distance, delay.
• Sorting
Connect and serialize
Connect multiple sortable lists and move items from one to
another - serialize the new results and push them to servers.
• Interact with other plugins
Sortable items can be dropped in droppables, and draggables
can be connected to sortable lists.

38. • Nested sortables
You can nest your HTML structure n-levels deep, and make all
items sortable from one level to another automatically.
• Supports the Draggable API
Like a option from Draggables? Use it in Sortables. Most
options are behaving exactly the same and are available on
both. Some examples: Helper creation, scrolling, containment,
distance, delay.
• Sorting
Connect and serialize
Connect multiple sortable lists and move items from one to
another - serialize the new results and push them to servers.
• Interact with other plugins
Sortable items can be dropped in droppables, and draggables
can be connected to sortable lists.
• Advanced callbacks
A wide range of callbacks servers for all purposes: start, sort,
stop, change, update, remove, receive, enter, leave

39. Resizing..
Selecting..

40. ARGH!
Too much content!

41. Effects
Ready to use effects

42. Plug & Play
Blind Highlight
Bounce Pulsate
Clip Scale
Drop Shake
Explode Slider
Fold Transfer

43. Widgets
Themable, full featured components

44. Default methods
All widgets can be enabled and disabled:
enable disable
All widgets can be safely destroyed:
destroy
All widgets use the CSS Framework:
Themable

46. Hands-on experience

48. Meta
• •
paul.bakaus@gmail.com http://jqueryui.com
• •
http://paulbakaus.com http://wiki.jqueryui.com
• http://dev.jqueryui.com

49. Thank you for your attention.
http://jqueryui.com