An in-depth look at jQuery UI

Loading...

Flash Player 9 (or above) is needed to view presentations.
We have detected that you do not have it on your computer. To install it, go here.

0 comments

Post a comment

    Post a comment
    Embed Video
    Edit your comment Cancel

    6 Favorites

    An in-depth look at jQuery UI - Presentation 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

    + Paul BakausPaul Bakaus, 6 months ago

    custom

    2361 views, 6 favs, 1 embeds more stats

    This is the newly updated in-depth talk about jQuer more

    More info about this document

    © All Rights Reserved

    Go to text version

    • Total Views 2361
      • 2360 on SlideShare
      • 1 from embeds
    • Comments 0
    • Favorites 6
    • Downloads 108
    Most viewed embeds
    • 1 views on http://static.slidesharecdn.com

    more

    All embeds
    • 1 views on http://static.slidesharecdn.com

    less

    Flagged as inappropriate Flag as inappropriate
    Flag as inappropriate

    Select your reason for flagging this presentation as inappropriate. If needed, use the feedback form to let us know more details.

    Cancel
    File a copyright complaint
    Having problems? Go to our helpdesk?

    Categories