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