Jquery Ui 1.8: Themes And Effects

Front 1

Describe the three basic kinds of elements included in the jQuery UI plugin

Back 1

Effects - enhanced effects beyond those provided by the base jQuery lib

Interactions - mouse events like drag-and-drop

Widgets - set of common controls like progress bars, sliders, etc

Front 2

Explain the purpose of ThemeRoller

Back 2

ThemeRoller provides a quick way to create themes without writing css from scratch; it can be used to:
a) preview a gallery of existing themes
b) build a custom theme
c) modify an existing theme

Front 3

(true or false) IE does not support rounded corners on images

Back 3

true (sort of)

jQuery rounded corners do not work in any version of IE up to and including 8

Also, FIREFOX does not support rounded corners on images.

Front 4

explain the jQuery UI effect: blind

Back 4

shows/hides element by moving bottom edge up or down (or left/right if 'direction' set to horizontal)

Front 5

explain the jQuery UI effect: bounce

Back 5

element bounces vertically or horizontally and is optionally shown/hidden

Front 6

explain the jQuery UI effect: clip

Back 6

shows/hides element by moving opposite borders together until they meet in the middle or vice versa

Front 7

explain the jQuery UI effect: drop

Back 7

shows/hides element by making it appear to drop on/off the page

Front 8

explain the jQuery UI effect: explode

Back 8

shows/hides element by splitting it apart and moving parts in radial directions as if imploding/exploding

Front 9

explain the jQuery UI effect: fade

Back 9

shows/hides element by adjusting opacity

Front 10

explain the jQuery UI effect: fold

Back 10

shows/hides element by adjusting opposite borders in/out

Front 11

explain the jQuery UI effect: highlight

Back 11

changes background color while showing/hiding element

Front 12

explain the jQuery UI effect: pulsate

Back 12

adjusts opacity of element on and off before showing/hiding

Front 13

explain the jQuery UI effect: puff

Back 13

expands/contracts element in place while adjusting opacity to show/hide

Front 14

explain the jQuery UI effect: scale

Back 14

expands or contracts by a percentage, 0=hide, 100=show

Front 15

explain the jQuery UI effect: shake

Back 15

shakes element back and forth, optionally can hide/show element

Front 16

explain the jQuery UI effect: size

Back 16

resizes element; can optionally restore to original size

Front 17

explain the jQuery UI effect: slide

Back 17

element appears to slide on/off page; shows/hides element

Front 18

explain the jQuery UI effect: transfer

Back 18

makes an outline that causes element to appear to transfer into another; hides/shows element

Front 19

(true or false) the core jQuery library allows users to animate colors

Back 19

false; jQuery UI provides methods to support this but not the core library

Front 20

what css properties are supported by jQuery UI's color animations?

Back 20

backgroundColor
border[Bottom|Top|Left|Right]Color
color
outlineColor

Front 21

In what way does jQuery UI enhance the core methods: show(), hide(), and toggle()?

Back 21

It allows more flexibility by providing four arguments for controlling the animation, instead of just a duration:

effect - UI effect to use
options - any effects options
speed - slow,normal,fast, or milliseconds
callback - optional callback executed after the animation completes

Front 22

(true or false)the core jQuery methods addClass(), removeClass() and toggleClass() are extended by jQuery UI

Back 22

true, it provides the following arguments:
class - css class to modify
speed - slow,normal,fast, or milliseconds
easing - an easing function passed to animate()
callback - callback executed when animation completes
force - force toggleClass() to add if true or remove if false

Front 23

what method does jQuery UI provide to allow switching between two classes?

Back 23

switchClass( removed, added, speed, easing, callback )

Front 24

which two easing functions are provided by jQuery core?

Back 24

linear and swing

Front 25

explain the $(...).position() options: my, at, and of

Back 25

my - location of the wrapped elements
at - location of the target element
of - a selector that identifies the target element or an Event

Example:
$('#elementToMove').position({
my: 'top left',
at: 'bottom right',
of: '#targetElement'
});

Front 26

explain the offset option used in $(...).position()

what data type is the value?

Back 26

specifies any offset to be added as a string with two values separated by space (in pixels, can be negative)

Front 27

explain the collision option used in $(...).position()

what are its possible values?

Back 27

rule to apply when positioned element extends beyond the window in any direction

accepts one or two parms in a string, sep by a space

flip: default, flips element to opposite side and tries to fit again

fit: keeps element in desired direction but adjusts position

none: disables collision detection

Front 28

explain the using option used in $(...).position()

what data type is the value?

Back 28

A function, replaces internal function that controls element's position for fine control of placement

called for each element of wrapped set with single argument: hash with top/left properties set to computed target position