An in-depth look at jQuery UI

5,718 views
5,591 views

Published on

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

Published in: Technology

An in-depth look at jQuery UI

  1. 1. An in-depth look at with Paul Bakaus
  2. 2. jQuery UI is different.
  3. 3. ok, maybe not *that* different.
  4. 4. jQuery UI is.. • build on jQuery • easy to learn & understand • unconventional in terms of API design
  5. 5. The jQuery UI Stack Core FX Core CSS Framework Interaction Utilities Effects Widgets
  6. 6. Core (or how to become a jQuery UI Ninja)
  7. 7. • Widget factory • ARIA • Mouse class • Utilities • enable/disable selection • tabbable/focusable/data selectors • scroll parent • key codes
  8. 8. The API How to actually use jQuery UI
  9. 9. Initializing $(...).widgetName(options)
  10. 10. Calling individual methods $(...).widgetName(“methodName“, [arg1, arg2])
  11. 11. Manipulating options on-the-fly $(...).widgetName(“option“, key, value)
  12. 12. That‘s it!
  13. 13. (Demo) Easily create new plugins using the widget factory.
  14. 14. 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“)
  15. 15. FX Core jQuery UI‘s rich effect API
  16. 16. Core Effects 1. Call rich effects using show hide toggle effect 2. Smooth class transitions with addClass removeClass toggleClass switchClass
  17. 17. „w00t! I know those methods already from jQuery!
  18. 18. CSS Framework Extended theming capacities
  19. 19. 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
  20. 20. Themeroller • Design custom themes • 100% jQuery UI CSS Framework compatible • Fun and intuitive UI (No coding!) • png8 with alpha transparency • Theme Gallery
  21. 21. pretty neat but I need my own styles anyway
  22. 22. More power.
  23. 23. It‘s not exclusive. • Uses em‘s for all units • Scales background images • All documented • Comes with testing & debugging tools
  24. 24. Interaction Easy to use patterns
  25. 25. Drag & Drop
  26. 26. • Snapping Snap to elements with many configurable options like snapMode, snapTolerance, and snap itself. Drag & Drop
  27. 27. • 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
  28. 28. • 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.
  29. 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. • 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.
  30. 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. • 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.
  31. 31. Sorting
  32. 32. • Nested sortables You can nest your HTML structure n-levels deep, and make all items sortable from one level to another automatically. Sorting
  33. 33. • 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
  34. 34. • 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.
  35. 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 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.
  36. 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. • 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
  37. 37. Resizing.. Selecting..
  38. 38. ARGH! Too much content!
  39. 39. Effects Ready to use effects
  40. 40. Plug & Play Blind Highlight Bounce Pulsate Clip Scale Drop Shake Explode Slider Fold Transfer
  41. 41. Widgets Themable, full featured components
  42. 42. 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
  43. 43. Hands-on experience
  44. 44. Meta • • paul.bakaus@gmail.com http://jqueryui.com • • http://paulbakaus.com http://wiki.jqueryui.com • http://dev.jqueryui.com
  45. 45. Thank you for your attention. http://jqueryui.com

×