|
Options
The nitty-gritty on tweaking Pinwheel.
IntroductionThe trick to making a Pinwheel do the cool stuff is a matter of specifying options. The following is a list of those options. DetailsLadies and gentlemen, may I present, in alphabetical order, the Pinwheel options: afterCloseType: function or array of functions; Default: none Functions to apply to the Pinwheel after it closes. More information at BeforeAndAfterHooks. afterOpenType: function or array of functions; Default: none Functions to apply to the Pinwheel after it opens. More information at BeforeAndAfterHooks. beforeCloseType: function or array of functions; Default: none Functions to apply to the Pinwheel before it closes. More information at BeforeAndAfterHooks. beforeOpenType: function or array of functions; Default: none Functions to apply to the Pinwheel before it opens. More information at BeforeAndAfterHooks. cancelableType: 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. choiceIdPrefixType: string; Default: 'pw-choice-' The string prepended to the id attribute of each choice element. classNameType: 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). closeEffectsType: object; Default: { move: null } A list of Scriptaculous Effect functions to apply to Pinwheel choices as it is being closed. More information at OpenAndCloseEffects. containerIdPrefixType: string; Default: 'pw-container-' The string prepended to the id attribute of the <div> containing the Pinwheel and the <select> it replaces. containerClassNameType: string; Default: 'pw-container' The class attribute of the <div> containing the Pinwheel and the <select> it replaces. directionType: string; Default: 'clockwise' The direction that choices appear around the Pinwheel. Valid values are 'clockwise' and 'counterclockwise'. distanceType: 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. durationType: 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. firstChoiceAngleType: 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'. heightType: number; Default: 50 The height style attribute of the choice elements in pixels. idPrefixType: 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). mouseoverType: 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. mouseoutType: 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. openEffectsType: object; Default: { move: null } A list of Scriptaculous Effect functions to apply to Pinwheel choices as it is being opened. More information at OpenAndCloseEffects. populateType: function; Default: Pinwheel.Populate.optionText The method used to generate the contents of the choice elements. More information at PopulateFunctions. selectedType: function or array of functions; Default: none Functions to apply to the Pinwheel when a choice is, well, chosen. More information at BeforeAndAfterHooks. sizeType: 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. widthType: number; Default: 50 The width style attribute of the choice elements in pixels. |