Your SlideShare is downloading. ×
An in-depth look at jQuery UI
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

An in-depth look at jQuery UI

5,157
views

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

Published in: Technology

0 Comments
13 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
5,157
On Slideshare
0
From Embeds
0
Number of Embeds
5
Actions
Shares
0
Downloads
250
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

    ×