Просмотр архива jColor

INTRO
=====
This is a complete specification of jColor's API. If you are
looking for a
ligher introduction that covers typical use cases, please
refer to the
index.html the same folder as this file.


USAGE
=====
Include
the files jcolor.min.js and jcolor.min.css, as follows

<script
type="text/javascript"
src="path/to/jcolor.min.js"></script>
<link
rel="stylesheet" type="text/css"
href="path/to/jcolor.min.css">

As with all jQuery plugins,
the plugin files should be included after
jquery.js.


METHODS
=======
After including the jColor plugin files, the
following methods are available on
all jQuery wrapped content (e.g.
$('.some-element').colorpicker()...).

.colorpicker(options:Object)
----------------------------
This
creates a jColor color picker on the first matched element and returns
the
color picker object. If the first matching element already is a jColor
color
picker, it will be reused and returned instead.

The options object
may contain the following key/value pairs (none of which
are
mandatory)

color:String|Object specifying the initial color. Valid
strings are either
hexadecimal (e.g. '#00FF00FF') or CSS style (e.g.
'rgba(0, 255, 0, 1)'). Valid
objects must contain either the keys 'r', 'g'
and 'b' or 'h', 's' and 'l'. An
'a' (alpha) key is optional. E.g.: { r: 0,
g: 1, b: 0, a: 1 }. Object values
should always be in the range [0,1]. The
default value is the color of the
element that the color picker is attached
to.

colorSpace:String specifies which color space to use. Valid options
are 'rgb',
'rgba', 'hsl' and 'hsla'. The default value is
'hsla'.

displayColor:String if specified will make the colorpicker display
a textual
representation of the current color. Valid options are 'hex' and
'css'.

displayColorSpace:String specifies which color space to output the
displayColor
in. If omitted, the color picker's color space will be
used.

labels:Boolean toggles slider labels.

expandEvent:String specifies
what event will trigger the expansion of the color
picker. It is possible
to provide several events by separating them with a
space, e.g. 'click
focus keydown'. The default expand events are
'mousedown
touchstart'.

collapseEvent:String specifies what event will trigger the
collapse of the color
picker. The default collapse event is '', i.e. no
event. However, clicking
outside of the color picker will always collapse
it.

staticComponents:Boolean specified whether the slider background
colors should
should dynamically update to reflect the current color
configuration, or remain
static. The default value is
false.

.colorpicker().destroy()
------------------------
This destroys the
color picker and restores the original object that the color
picker was
attached
to.

.colorpicker().toString(colorSpace:String)
------------------------------------------
Returns
a hexadecimal String representation of the currently selected color,
e.g.
'#00FF00FF'.

colorSpace:String specifies which color space the returned
color string will be
in. Valid values are 'rgb', 'rgba', 'hsl' and 'hsla'.
The default value is the
color space that was specified when the color
picker was
created.

.colorpicker().toCssString(colorSpace:String)
---------------------------------------------
Returns
a CSS style String representation of the currently selected color,
e.g.
'rgba(0,255,0,1)'.

colorSpace:String specifies which color space the
returned color string will be
in. Valid values are 'rgb', 'rgba', 'hsl' and
'hsla'. The default value is the
color space that was specified when the
color picker was
created.

.colorpicker().toObject(colorSpace:String)
------------------------------------------
Returns
an Object representation of the currently selected color, e.g.
{ r: 0, g:
1, b:0, a: 1 }.

colorSpace:String specifies which color space the returned
color string will be
in. Valid values are 'rgb', 'rgba', 'hsl' and 'hsla'.
The default value is the
color space that was specified when the color
picker was
created.

.colorpicker().getColorSpace()
------------------------------
Returns
a String specifying the color space of the color picker. Possible
return
values are 'rgb', 'rgba', 'hsl' and 'hsla'.


EVENTS
======
The
color picker element emits an event whenever the selected color
changes,
which may be up to 60 times per second when the user drags a
slider. The emitted
event is a custom jQuery event and may be listened to
as follows

$('.my-color-picker').on('newcolor', function (ev, colorpicker,
component, value) {
  console.log('color: ' + colorpicker.toCssString());
// 'color: #00FF00FF'
  console.log('component: ' + component); //
'component: a'
  console.log('value: ' + value); // 'value: 1'
});

As a
convenience, it is also possible to call .on() on a reference to a
jColor
instance:

var colorpicker =
$('.my-color-picker').colorpicker(...);
colorpicker.on('newcolor', function
(...) { ... });

The 'newcolor' event callback function gets called with
the following arguments.

ev:jQuery.Event
------------------
A standard
jQuery event containing information about the element that triggered
the
event. Usually not very
interesting.

colorpicker:Colorpicker
-----------------------
A reference
to the jColor color picker. Any of the functions specified above can
be
called on this reference.

colorComponent:String
---------------------
The
single character String, saying which color component that was last
changed.
This may be either 'r', 'g', 'b', 'h', 's', 'l' or
'a'.

componentValue:Number
---------------------
The new value of the
changed color component. The value is always normalized to
the range
[0,1].