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

An in-depth look at jQuery UI

on

  • 9,282 views

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.

Statistics

Views

Total Views
9,282
Views on SlideShare
9,179
Embed Views
103

Actions

Likes
13
Downloads
246
Comments
0

9 Embeds 103

http://www.slideshare.net 43
http://rubyrailsandwindows.blogspot.com 26
http://infuture.pixnet.net 19
http://192.168.1.254 5
http://rubyrailsandwindows.blogspot.com.au 4
http://rubyrailsandwindows.blogspot.com.br 3
http://static.slidesharecdn.com 1
http://rubyrailsandwindows.blogspot.in 1
http://rubyrailsandwindows.blogspot.no 1
More...

Accessibility

Categories

Upload Details

Uploaded via as Apple Keynote

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />

An in-depth look at jQuery UI An in-depth look at jQuery UI Presentation Transcript

  • 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 Effects Widgets
  • Core (or how to become a jQuery UI Ninja)
  • • Widget factory • ARIA • Mouse class • Utilities • enable/disable selection • tabbable/focusable/data selectors • scroll parent • key codes
  • 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 jqueryish, under the hood, it‘s all prototypal • ..which allows you to get the plugin instance via $().data(“widgetName“)
  • FX Core jQuery UI‘s rich effect API
  • Core Effects 1. Call rich effects using show hide toggle effect 2. Smooth class transitions with addClass removeClass toggleClass switchClass
  • „w00t! I know those methods already from jQuery!
  • CSS Framework Extended theming capacities
  • 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
  • Themeroller • Design custom themes • 100% jQuery UI CSS Framework compatible • Fun and intuitive UI (No coding!) • png8 with alpha transparency • Theme Gallery
  • 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 & debugging tools
  • Interaction Easy to use patterns
  • Drag & Drop
  • • Snapping Snap to elements with many configurable options like snapMode, snapTolerance, and snap itself. Drag & Drop
  • • 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
  • • 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.
  • • 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.
  • • 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.
  • Sorting
  • • Nested sortables You can nest your HTML structure n-levels deep, and make all items sortable from one level to another automatically. Sorting
  • • 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
  • • 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.
  • • 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.
  • • 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
  • 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 destroyed: destroy All widgets use the CSS Framework: Themable
  • Hands-on experience
  • Meta • • paul.bakaus@gmail.com http://jqueryui.com • • http://paulbakaus.com http://wiki.jqueryui.com • http://dev.jqueryui.com
  • Thank you for your attention. http://jqueryui.com