An in-depth look at jQuery UI

  • 5,075 views
Uploaded on

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

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

More in: Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
5,075
On Slideshare
0
From Embeds
0
Number of Embeds
5

Actions

Shares
Downloads
249
Comments
0
Likes
13

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

















































Transcript

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