Your SlideShare is downloading. ×
0
An in-depth look at




    with Paul Bakaus
jQuery UI is different.
ok, maybe not *that*
     different.
jQuery UI is..
     • build on jQuery
     • easy to learn & understand
     • unconventional in terms of API design
The jQuery UI Stack


        Core                  FX Core

              CSS Framework

Interaction      Utilities      ...
Core
(or how to become a jQuery UI Ninja)
• Widget factory
• ARIA
• Mouse class
• Utilities
 •   enable/disable selection

 •   tabbable/focusable/data selectors

 ...
The API
How to actually use jQuery UI
Initializing


$(...).widgetName(options)
Calling individual methods


$(...).widgetName(“methodName“, [arg1, arg2])
Manipulating options on-the-fly


    $(...).widgetName(“option“, key, value)
That‘s it!
(Demo)

Easily create new plugins using the widget factory.
unsupported!

Modifying a plugin
• Use the (plenty of) callbacks whenever
  possible
• Even though the exposed API is jque...
FX Core
jQuery UI‘s rich effect API
Core Effects
1. Call rich effects using

           show         hide      toggle   effect

2. Smooth class transitions wi...
„w00t! I know those methods already
            from jQuery!
CSS Framework
Extended theming capacities
The CSS Framework
         •   Semantic + generic
             classes instead of per-
             plugin

         •   S...
Themeroller
      •   Design custom themes

      •   100% jQuery UI CSS
          Framework compatible

      •   Fun and...
pretty neat but I need
my own styles anyway
More power.
It‘s not exclusive.
• Uses em‘s for all units
• Scales background
  images
• All documented
• Comes with testing &
  debug...
Interaction
Easy to use patterns
Drag & Drop
•   Snapping
    Snap to elements with many configurable options
    like snapMode, snapTolerance, and snap itself.




   ...
•   Snapping
    Snap to elements with many configurable options
    like snapMode, snapTolerance, and snap itself.



•   ...
•   Snapping
    Snap to elements with many configurable options
    like snapMode, snapTolerance, and snap itself.



•   ...
•   Snapping
    Snap to elements with many configurable options
    like snapMode, snapTolerance, and snap itself.



•   ...
•   Snapping
    Snap to elements with many configurable options
    like snapMode, snapTolerance, and snap itself.



•   ...
Sorting
•   Nested sortables
    You can nest your HTML structure n-levels deep, and make all
    items sortable from one level to...
•   Nested sortables
    You can nest your HTML structure n-levels deep, and make all
    items sortable from one level to...
•   Nested sortables
    You can nest your HTML structure n-levels deep, and make all
    items sortable from one level to...
•   Nested sortables
    You can nest your HTML structure n-levels deep, and make all
    items sortable from one level to...
•   Nested sortables
    You can nest your HTML structure n-levels deep, and make all
    items sortable from one level to...
Resizing..


             Selecting..
ARGH!
Too much content!
Effects
Ready to use effects
Plug & Play
Blind     Highlight

Bounce    Pulsate

Clip      Scale

Drop      Shake

Explode   Slider

Fold      Transfer
Widgets
Themable, full featured components
Default methods
All widgets can be enabled and disabled:

           enable    disable

  All widgets can be safely destro...
Hands-on experience
Meta
•                           •
    paul.bakaus@gmail.com       http://jqueryui.com

•                           •
    ...
Thank you for your attention.
         http://jqueryui.com
An in-depth look at jQuery UI
An in-depth look at jQuery UI
An in-depth look at jQuery UI
An in-depth look at jQuery UI
Upcoming SlideShare
Loading in...5
×

An in-depth look at jQuery UI

5,238

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

Transcript of "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
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×