Browse files


  • Loading branch information...
1 parent 277e909 commit 6fe3674b8ab32379731f766791eb166a362b10bd @vanderlee vanderlee committed Oct 31, 2011
Showing with 28 additions and 21 deletions.
  1. +14 −18 README
  2. +12 −1 TODO
  3. +2 −2 jquery.colorpicker.js
@@ -9,40 +9,39 @@ 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.
+Note; this plugin is constantly changing, this file may be out of date.
+alpha: false
+ Whether or not to show the inputs for alpha.
autoOpen: false
If true, the dialog opens automatically upon page load.
If false, dialog opens on click of selected element.
+closeOnOutside: true
+ Close the window when clicking outside the colorpicker display.
color: '#00FF00'
Initial color. Formats recognized are:
rrggbb (same as previous, but without the #)
+hsv: true
+ Whether or not to show the inputs for HSV.
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.
title: 'Pick a color'
Title to display in the header.
-onChange: undefined
-onSelect: undefined
-onClose: undefined
+onChange: null
+onClose: null
Events trigger on each change, confirmation (click on OK button) and
cancellation (click on Cancel, outside window or window close button)
Note that onChange 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.
-closeOnOutside: true
- Close the window when clicking outside the colorpicker display.
-revert: true
- Revert the current color back to the selected color when cancelling.
-swatches: undefined
+rgb: true
+ Whether or not to show the inputs for RGB.
+swatches: null
'undefined' to show swatches of HTML colors or provide your own object
with colornames and [r,g,b] array.
For example { 'red': [ 255, 0, 0 ], 'blue': [0, 0, 255] }
@@ -58,10 +57,7 @@ showButtonPanel:false
Set whether to show the individual control components of the colorpicker
dialog. Set to false to hide.
-hsv: true
-rgb: true
-alpha: false
- Whether or not to show the inputs for HSV, RGB and/or alpha respectively.
duration: 'fast'
showAnim: 'fadeIn'
@@ -4,4 +4,15 @@ Post to...
- screenshot
- link(s)
- - check specs/requirements and add/fix/detail
+ - check specs/requirements and add/fix them
+Layout mechanism
+ ['header', [['map', 'websafe'], 'bar', ['preview, 'hsv', 'rgb', 'a', 'hex'], 'swatches'], 'buttonpanel']
+ [vertical[horizontal[vertical[horz...[...]]]]]
+Related-colors swatching
+Configurable swatch layout
+ container-width/height, swatch-width/height
+ Autoscaling (table?)
@@ -383,7 +383,7 @@ console.log(this.widgetBaseClass);
var e = undefined;
this.init = function() {
- e = $(_html()).appendTo($('#ui-colorpicker-map-container', inst.dialog));
+ e = $(self._html()).appendTo($('#ui-colorpicker-map-container', inst.dialog));
e.bind('mousedown', _mousedown);
@@ -574,7 +574,7 @@ console.log(this.widgetBaseClass);
- var _html = function() {
+ this._html = function() {
var html = '<div id="ui-colorpicker-map" class="ui-colorpicker-border">'
+'<span id="ui-colorpicker-map-layer-1" style="background: url(images/map.png) no-repeat;">&nbsp;</span>'
+'<span id="ui-colorpicker-map-layer-2" style="background: url(images/map.png) no-repeat;">&nbsp;</span>';

0 comments on commit 6fe3674

Please sign in to comment.