---

Options

ProColor offers many different options for configuring its behavior when a new ProColor object is created. All of the important ones are documented below. To see examples of these options in use, look at the examples page.

Options:

• mode: Either 'static' or 'popup'.
• input: Input textbox or hidden field to record color in. (Format: '#RRGGBB' string.)
• showInField: Show the current color as the input field's background color (default: false).
• parent: In static mode, the containing element to insert this into. In popup mode, this is the element the popup should be attached to (usually the same as input).
• closeButton: Show close button (default: false for 'static', true for 'popup').
• color: Initial color to select (default: extract from input field, or use '#FFFFFF').
• imgPath: URL to dir containing ProColor's .png files, if they're not in the same place as the .js file. This is directly prepended to the names of the files, so it usually must have a trailing '/'.
• width: Dimensions of the color picker, in pixels. Default width is '360' pixels.
• height: Dimensions of the color picker, in pixels. Default height is '192' pixels.
• offsetx: Offset of color picker's content, from its left edge, in pixels. Default is '0' pixels.
• offsety: Offset of color picker's content, from its top edge, in pixels. Default is '0' pixels.
• editbg: Background color of color picker's edit fields. Default is '#FFFFFF'.
• edittext: Color of text in color picker's edit fields: Default is '#4C4C4C'.
• outputFormat: How to format the text in the textbox. A format string that accepts:
  • {RR} - Two-digit red hex value.
  • {GG} - Two-digit green hex value.
  • {BB} - Two-digit blue hex value.
  • {R} - One-digit red hex value.
  • {G} - One-digit green hex value.
  • {B} - One-digit blue hex value.
  • {red} - Decimal red (0-255).
  • {grn} - Decimal green (0-255).
  • {blu} - Decimal blue (0-255).
  • {hue} - Decimal hue (0-359).
  • {sat} - Decimal saturation (0-100).
  • {brt} - Decimal brightness (0-100).
  • . - All other characters will be copied as-is.
  In addition, you may use tokens like {rr} to request lowercase hex instead of uppercase. The default format string is "#{RR}{GG}{BB}".
• onOpening: Called when the color picker is about to appear but has not yet appeared: callback(this, 'opening'). (Note that the color picker's <div> has not been created when onOpening is called --- the color picker object has been created and its options initialized, but no elements have yet been created.) The return value of your callback is ignored.
• onOpened: Called after the color picker has appeared, just before returning control back to the browser: callback(this, 'opened'). The return value of your callback is ignored.
• onClosing: Called when the color picker is about to be destroyed but has not yet been destroyed: callback(this, 'closing'). The return value of your callback is ignored.
• onClosed: Called after the color picker has been destroyed, just before the code returns control to the browser: callback(this, 'closed'). (Note that the color picker object still exists, but all of its elements and event handlers have been destroyed by this point.) The return value of your callback is ignored.
• onChanging: Called when the color is changing: callback(this, 'changing'). (This is called many times while the color is changing during a mouse-drag operation, for example, and is always called after the color-picker's color member has been updated.) The return value of your callback is ignored.
• onChanged: Called when the color has changed: callback(this, 'changed'). (This is called after the user has made a definitive change to the color, such as when the mouse button is released, or when the user types in a new color. This is always called after the color-picker's color member has been updated.) The return value of your callback is ignored.
• onCancelClick: Called when user presses Esc or clicks outside the color-picker popup: callback(this, 'cancelclick'). The return value of your callback is ignored.
• onAcceptClick: Called when user presses Enter or double-clicks: callback(this, 'acceptclick'). The return value of your callback is ignored.
• onCloseButton: Called when user clicks the close button, before closing the color-picker: callback(this, 'closebutton'). This function must return a value indicating whether the color-picker should be closed, true to close the color-picker, or false to leave it open.