My favorites | Sign in
Project Home Downloads Wiki Issues Source
READ-ONLY: This project has been archived. For more information see this post.
Search
for
Options  
The nitty-gritty on tweaking Pinwheel.
Updated Mar 3, 2008 by dan.dor...@gmail.com

Introduction

The trick to making a Pinwheel do the cool stuff is a matter of specifying options. The following is a list of those options.

Details

Ladies and gentlemen, may I present, in alphabetical order, the Pinwheel options:

afterClose

Type: function or array of functions; Default: none

Functions to apply to the Pinwheel after it closes.

More information at BeforeAndAfterHooks.

afterOpen

Type: function or array of functions; Default: none

Functions to apply to the Pinwheel after it opens.

More information at BeforeAndAfterHooks.

beforeClose

Type: function or array of functions; Default: none

Functions to apply to the Pinwheel before it closes.

More information at BeforeAndAfterHooks.

beforeOpen

Type: function or array of functions; Default: none

Functions to apply to the Pinwheel before it opens.

More information at BeforeAndAfterHooks.

cancelable

Type: boolean; Default: true

Whether the Pinwheel can be "canceled" by clicking on the center, containing element of the pinwheel.

When cancelable is set to true, then when a user clicks on the Pinwheel container, the Pinwheel closes with the previously selected choice remaining on top.

choiceIdPrefix

Type: string; Default: 'pw-choice-'

The string prepended to the id attribute of each choice element.

className

Type: string; Default: 'pinwheel'

The class attribute for the Pinwheel element.

Note that the Pinwheel <div> and the <select> it replaces are both wrapped in another <div>; className refers to the actual Pinwheel <div>, not its container element (that's controlled by containerClassName).

closeEffects

Type: object; Default: { move: null }

A list of Scriptaculous Effect functions to apply to Pinwheel choices as it is being closed.

More information at OpenAndCloseEffects.

containerIdPrefix

Type: string; Default: 'pw-container-'

The string prepended to the id attribute of the <div> containing the Pinwheel and the <select> it replaces.

containerClassName

Type: string; Default: 'pw-container'

The class attribute of the <div> containing the Pinwheel and the <select> it replaces.

direction

Type: string; Default: 'clockwise'

The direction that choices appear around the Pinwheel. Valid values are 'clockwise' and 'counterclockwise'.

distance

Type: integer; Default: 50

The radius of the opened Pinwheel, from the center of the Pinwheel element to the center of the choices.

Note that this could very well be changed to radius in the near future.

duration

Type: number; Default: 1

The amount of time (in seconds) it takes to open and close the Pinwheel.

Either or both of durationOpen or durationClose, if set, overrides duration.

firstChoiceAngle

Type: number (or string); Default: 0

The angle (in radians) at which the first choice element appears in relation to the Pinwheel element when it's open.

For example, if firstChoiceAngle is 0, the first choice appears to the right of the Pinwheel; if it's 3 / 2 * Math.PI, the first choice appears directly above the Pinwheel.

Alternatively, firstChoiceAngle can be specified with one of four strings: 'up', 'right', 'down', and 'left'.

height

Type: number; Default: 50

The height style attribute of the choice elements in pixels.

idPrefix

Type: string; Default: 'pw-'

The string prepended to the id attribute for the Pinwheel element.

Note that the Pinwheel <div> and the <select> it replaces are both wrapped in another <div>; idPrefix refers to the actual Pinwheel <div>, not its container element (that's controlled by containerIdPrefix).

mouseover

Type: function or array or functions; Default: none

Functions to apply when the Pinwheel is open and the user mouses over the choice elements.

More information at MouseoverAndMouseout.

mouseout

Type: function or array or functions; Default: none

Functions to apply when the Pinwheel is open and the user mouses out of a choice element.

More information at MouseoverAndMouseout.

openEffects

Type: object; Default: { move: null }

A list of Scriptaculous Effect functions to apply to Pinwheel choices as it is being opened.

More information at OpenAndCloseEffects.

populate

Type: function; Default: Pinwheel.Populate.optionText

The method used to generate the contents of the choice elements.

More information at PopulateFunctions.

selected

Type: function or array of functions; Default: none

Functions to apply to the Pinwheel when a choice is, well, chosen.

More information at BeforeAndAfterHooks.

size

Type: number; Default: N/A

The height and width style attributes of the choice elements in pixels.

Overrides the values of height and width, if specified.

width

Type: number; Default: 50

The width style attribute of the choice elements in pixels.

Powered by Google Project Hosting