September 29, 2008     An In-Depth Look at jQuery UI (Paul Bakaus)

jQuery UI overview
- offers richer effects than jQuery Core
- Core Effects extends Core API
- most effects hook into the show, hide, and toggle methods of Core
- also hook into add/remove/toggleClass
- added morphClass, switchClass (both are the same) - morph between 2 classes
- added effect method - works with effects unrelated to showing and hiding
- offers intelligent color animations
- offers advanced easing for animations (nonlinear transitions) * not found in YUI
- list of plug and play effects (many ported from scriptaculous)

Drag and Drop
- draggables: offers snapping to elements, auto z-index control, constrained dragging along axis or within boundaries
- only library that maintains relative and fixed css positioning during drags, still provides absolute position to callback
- uses placeholder dragging by default
- dynamic helper creation (helper meaning drag a placeholder instead of the element directly)
- check on pixel distance or time delay before starting drag operation, to prevent unintended dragging
- dynamically accept/reject draggables at drag time (check based on for example content of the current draggable)

Drag and drop sorting
- sortables: draggable ul/li list, or table rows
- nested sortables: can make items sortable from one level to another
- checks for & maintains float status automatically
- supports all options from draggable API (see list above)
- built-in method serialize results and push to servers, including over multiple lists that are connected
- supports difference tolerance modes for dropping (cursor over area, or edge of element over area)
- sortables and draggables are interoperable, can be used to drag and drop back and forth
- callbacks on pretty much every single event in the operation
- by default, shows a placeholder of the dragging element wherever it would be dropped
- sortIndicator: can specify your own indicator to show the new position of the element, instead of placeholder

- tutorial on how to use jQuery UI (refer to presentation slides)

Extending jQuery UI
- extending jQuery UI, creating new plugins (refer to slides for syntax details)
- Core contains widget factory, use .widget to register plugin
- through the widget factory, in init, have access to this.element, this.options
- then use .extend to add defaults and getters to the plugin
- getters make methods return a value

* At this point, my laptop battery died.

- After this he talked about what’s upcoming in the future (check out jQuery UI roadmap on website for more)

No Comments »

No comments yet.

RSS feed for comments on this post. TrackBack URI

Leave a comment