An in-depth look at
with Paul Bakaus

jQuery UI is different.

ok, maybe not *that*
different.

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

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

Core
(or how to become a jQuery UI Ninja)

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

The API
How to actually use jQuery UI

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

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

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

That‘s it!

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

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

FX Core
jQuery UI‘s rich effect API

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

„w00t! I know those methods already
from jQuery!

CSS Framework
Extended theming capacities

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

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

pretty neat but I need
my own styles anyway

More power.

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

Interaction
Easy to use patterns

Drag & Drop

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

• 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

• 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.

• 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.

• 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.

Sorting

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

• 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

• 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.

• 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.

• 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

Resizing..
Selecting..

ARGH!
Too much content!

Effects
Ready to use effects

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

Widgets
Themable, full featured components

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

Hands-on experience

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

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