231 lines
7.8 KiB
Plaintext
231 lines
7.8 KiB
Plaintext
jQuery.colorpicker v0.9.3
|
|
|
|
Copyright (c) 2011-2012 Martijn W. van der Lee
|
|
Licensed under the MIT.
|
|
|
|
Full-featured colorpicker for jQueryUI with full theming support.
|
|
Most images from jPicker by Christopher T. Tillman.
|
|
Sourcecode created from scratch by Martijn W. van der Lee.
|
|
|
|
IE support; make sure you have a doctype defined, or the colorpicker will not
|
|
display correctly.
|
|
|
|
Options:
|
|
alpha: false
|
|
Whether or not to show the inputs for alpha.
|
|
|
|
altAlpha: true
|
|
Change the opacity of the altField element(s) according to the alpha
|
|
setting.
|
|
|
|
altField: ''
|
|
Change the background color of the elements specified in this element.
|
|
|
|
altOnChange: true
|
|
If true, the altField element(s) are updated on every change, otherwise
|
|
only upon closing.
|
|
|
|
altProperties: 'background-color'
|
|
Comma-separated list of CSS properties to set color of in the altField.
|
|
The following properties are allowed, all others are ignored.
|
|
background-color
|
|
color
|
|
border-color
|
|
outline-color
|
|
|
|
autoOpen: false
|
|
If true, the dialog opens automatically upon page load.
|
|
|
|
buttonColorize: false
|
|
If a buttonimage is specified, change the background color of the
|
|
image when the color is changed.
|
|
|
|
buttonImage: 'images/ui-colorpicker.png'
|
|
Same as jQueryUI DatePicker.
|
|
|
|
buttonImageOnly: false
|
|
Same as jQueryUI DatePicker.
|
|
|
|
buttonText: null
|
|
Same as jQueryUI DatePicker. If null, use language default.
|
|
|
|
closeOnEscape: true
|
|
Close the window when pressing the Escape key on the keyboard.
|
|
|
|
closeOnOutside: true
|
|
Close the window when clicking outside the colorpicker display.
|
|
|
|
color: '#00FF00'
|
|
Initial color. Formats recognized are:
|
|
#rrggbb
|
|
rrggbb (same as previous, but without the #)
|
|
rgb(rrr,ggg,bbb)
|
|
rgba(rrr,ggg,bbb,a.a)
|
|
rgb(rrr%,ggg%,bbb%)
|
|
rgba(rrr%,ggg%,bbb%,aaa%)
|
|
w3c-defined color name
|
|
|
|
colorFormat: 'HEX'
|
|
Specifies the format of the color string returned in callbacks.
|
|
You can either specify one of the predefined formats:
|
|
#HEX #112233
|
|
#HEX3 #123 if possible, otherwise false.
|
|
HEX 112233
|
|
HEX3 123 if possible, otherwise false.
|
|
RGB rgb(123,45,67) if opaque, otherwise false.
|
|
RGBA rgba(123,45,67,0.123%)
|
|
RGB% rgb(12%,34%,56%) if opaque, otherwise false.
|
|
RGBA% rgba(12%,34%,56%,0.123%)
|
|
HSL hsl(123,45,67) if opaque, otherwise false.
|
|
HSLA hsla(123,45,67,0.123%)
|
|
HSL% hsl(12%,34%,56%) if opaque, otherwise false.
|
|
HSLA% hsla(12%,34%,56%,0.123%)
|
|
NAME Closest color name
|
|
EXACT Exact name if possible, otherwise false.
|
|
or specify your own format...
|
|
Each color channel is specified as a pair of two characters.
|
|
The first character determines the color channel:
|
|
a Alpha
|
|
r, g, b RGB color space; red, green and blue
|
|
h, s, v HSV color space; hue, saturation and value
|
|
c, m, y, k CMYK color space; cyan, magenta, yellow and black
|
|
L, A, B LAB color space; Luminosity, *A and *B.
|
|
The second character specifies the data type:
|
|
x Two-digit hexadecimal notation.
|
|
d Decimal (0-255) notation.
|
|
f Floating point (0-1) notation, not rounded.
|
|
p Percentage (0-100) notation, not rounded.
|
|
If you prefix a valid pair with a backslash, it won't be replaced.
|
|
All patterns are case sensitive.
|
|
For example, to create the common hex color format, use "#rxgxbx".
|
|
For an rgba() format, use "rgba(rd,gd,bd,af)"
|
|
|
|
You can also specify an array of formats where the first non-FALSE one
|
|
is returned. Note that the only formats able to return FALSE are the
|
|
predefined formats HEX3 and EXACT. For example, this array will output
|
|
HEX3 format if possible or HEX format otherwise:
|
|
['HEX3', 'HEX']
|
|
|
|
dragggable: true
|
|
Make the dialog draggable if the header is visible and the dialog is
|
|
not inline.
|
|
|
|
duration: 'fast'
|
|
Same as jQueryUI DatePicker.
|
|
|
|
hsv: true
|
|
Whether or not to show the inputs for HSV.
|
|
|
|
layout: { ... }
|
|
Set the position of elements in a table layout.
|
|
You could create any layout possible with HTML tables by specifying
|
|
cell position and size of each part.
|
|
@todo document how this works.
|
|
|
|
limit: ''
|
|
Limit the selectable colors to any of the predefined limits:
|
|
'' No limitations, allow 8bpp color for a palette of
|
|
all 16 million colors.
|
|
'websafe' Set of 216 colors composed of 00, 33, 66, 99, cc
|
|
and ff color channel values in #rrggbb.
|
|
'nibble' 4 bits per color, can be easily converted to #rgb
|
|
format.
|
|
The palette is limited to 4096 colors.
|
|
'binary' Allow only #00 or #ff as color channel values for
|
|
primary colors only; only 8 colors are available
|
|
with this limit.
|
|
'name' Limit to closest color name.
|
|
|
|
modal:
|
|
Ensures no other controls on screen can be used while the dialog is
|
|
opened.
|
|
Also look at showCancelButton and closeOnEscape to use in combination
|
|
with the modal option. closeOnOutside is redundant when used with modal.
|
|
|
|
mode: 'h'
|
|
Determines the functionality of the map and bar components. Allowed
|
|
values are; 'h', 's', 'l', 'r', 'g', 'b' or 'a', for hue, saturation,
|
|
luminosity, red, green, blue and alpha respectively.
|
|
|
|
parts: ''
|
|
Determine which parts to display.
|
|
Use any of the preset names ('full', 'popup' or 'inline') or specify
|
|
an array of part names (i.e. ['header', 'map', 'bar', 'hex', 'hsv',
|
|
'rgb', 'alpha', 'lab', 'cmyk', 'preview', 'swatches', 'footer']).
|
|
If an empty string is given, the parts will be automatically chosen as
|
|
preset 'popup' or 'inline' depending on the context in which the
|
|
colorpicker is used.
|
|
|
|
rgb: true, // Show RGB controls and modes
|
|
Whether or not to show the inputs for RGB.
|
|
|
|
regional: '',
|
|
Sets the language to use. Note that you must load the appropriate
|
|
language file from the i18n directory. '' is included by default.
|
|
|
|
showAnim: 'fadeIn'
|
|
Same as jQueryUI DatePicker.
|
|
|
|
showCancelButton: true
|
|
Show the Cancel button if buttonpane is visible.
|
|
|
|
showCloseButton: true
|
|
Show the Close button if the header is visible.
|
|
If the dialog is inline, the close button is never shown.
|
|
|
|
showNoneButton: false
|
|
Show the None/Revert button if buttonpane is visible.
|
|
|
|
showOn: 'focus'
|
|
Same as jQueryUI DatePicker.
|
|
|
|
showOptions: {}
|
|
Same as jQueryUI DatePicker.
|
|
|
|
swatches: null
|
|
'null' to show swatches of HTML colors or provide your own object
|
|
with colornames and {r:1, g:1, b:1} array.
|
|
For example { 'red': {r:1, g:0, b:0}, 'blue': {r:0, g:0, b:1} }
|
|
|
|
title: null
|
|
Title to display in the header. If null, use language default.
|
|
|
|
Events:
|
|
init: null
|
|
Triggered on initially setting the color. Called only once.
|
|
Callbacks recieve same data as select event.
|
|
|
|
close: null
|
|
Triggered when the popup is closed.
|
|
Callbacks recieve same data as select event and an additional number
|
|
of fields containing the current color in all supported color spaces.
|
|
These are rgb{}, hsv{}, cmyk{}, lab{}, hsl{} and a.
|
|
Most values are floating point numbers in range [0,1] for accuracy.
|
|
The a and b values in the lab color space have range [-1,1].
|
|
|
|
select: null
|
|
Triggered on each change, confirmation (click on OK button) and
|
|
cancellation (click on Cancel, outside window or window close button)
|
|
respectively.
|
|
|
|
The event recieves a jQuery event object and a data object containing
|
|
the elements 'formatted' (with the color formatted according to
|
|
formatColor).
|
|
|
|
Note that select may be triggered in rapid succession when dragging
|
|
the mouse accross the map or bar and may be triggered without a change
|
|
in color upon specific user interactions.
|
|
|
|
Methods:
|
|
open
|
|
Open the dialog
|
|
|
|
close
|
|
Close the dialog
|
|
|
|
destroy
|
|
Destroy the widget
|
|
|
|
setColor
|
|
Set the current color to the specified color. Accepts any
|
|
CSS-confirmant color specification. |