Steps required to implement the plugin:
- Include script references to the jquery library, to the cookie plugin authored by Klaus Hartl
(https://github.com/carhartl/jquery-cookie), to jeegoopopup and to jeegoocolor:
<script type="text/javascript" src="/jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="/jquery.cookie.min.js"></script>
<script type="text/javascript" src="/jeegoopopup/jquery.jeegoopopup.1.0.0.min.js"></script>
<script type="text/javascript" src="/jeegoocolor/jquery.jeegoocolor.1.0.0.min.js"></script> - Select a skin from the skins folder of jeegoopopup and include a reference to the skins' stylesheet:
<link href="/jeegoopopup/skins/clean/style.css" rel="Stylesheet" type="text/css" /> - Open the colorpicker by calling:
$.jeegoocolor(options);
where options is an object which can be configured with properties and callbacks. - On pressing the 'Ok' button the underlying popup's onClose callback is called with argument true
and the callback onPick is called with the selected color. - On pressing the 'Cancel' button or clicking the popup's close button the underlying popup's onClose
callback is called without any arguments.
Public methods
Jeegoocolor inherits the public methods of jeegoopopup; however, arguments passed to the close method are not passed on to the onClose callback.
The following additional method is available:
| Name | Arguments | Function |
|---|---|---|
| $.jeegoocolor | options object | Opens the color picker. Calls $.jeegoopopup.open internally. |
Options properties
Jeegoocolor inherits the options properties of jeegoopopup; however, the html property is overriden with the UI html of jeegoocolor. Also, the default values of the properties width, height, scrolling and resizable are set to 419, 340, 'no' and false respectively.
The following additional properties are available:
| Name | Type | Default value | Function |
|---|---|---|---|
| color | string | undefined | The start color to initialize the colorpicker. Can be formatted as hex color string prefixed with or without '#' or rgb color string, e.g. '0f39aa', '#0f39aa' or 'rgb(15, 57, 170)'. |
| history | int | 24 | The maximum number of recently used colors to display. |
| cookieName | string | 'jg_jeegoocolor' | The name of the cookie which keeps track of recently used colors. |
| cancel | string | 'Cancel' | The label on the cancel button. |
| ok | string | 'Ok' | The label on the ok button. |
Options callbacks
Jeegoocolor inherits the callbacks of jeegoopopup; however, the onClose callback receives no arguments on clicking the cancel or popup close button and the argument true on clicking the color picker's ok button. Arguments passed to the $.jeegoopopup.close method are not passed on to the onClose callback.
The following additional callback is available:
| Name | Arguments | Called on |
|---|---|---|
| onPick | The picked color formatted as hex color string, e.g. '000000' or 'ffffff' | Clicking the 'Ok' button in the color picker. |
Public properties
Jeegoocolor inherits it's public properties from jeegoopopup.
