The Wheel Color Picker can be applied to almost any HTML elements which support jQuery .val() function. You can specify the format of the color value.
Initialize the color picker to an element by simply calling:
.wheelColorPicker( options );
<input type="text" class="colorpicker" /> <script type="text/javascript"> $(function() { $('.colorpicker').wheelColorPicker({ dir: '.' }); }); </script>
dir | String | Directory path containing necessary plugin images. |
format | 'hex' | 'css' | 'rgb' | 'rgba' | 'rgb%' | 'rgba%' | Format of the chosen color value. |
preview | Boolean | Enable live color preview on the input's background. |
userinput | Boolean | Enable picking color by typing directly |
validate | Boolean | When userinput is enabled, always convert the input value to a specified format. |
color | String | Initial value in any of supported color value format. This value takes precedence over value attribute specified directly on input tags. If you want to use the tag's value attribute instead, set this to null. |
alpha | Boolean | Force the color picker to use alpha value despite its selected color format. |
inverseLabel | Boolean | Use inverse color for input label instead of black/white color. Default is true. |
show | .wheelColorPicker("show") | Show the color picker dialog. |
hide | .wheelColorPicker("hide") | Hide the color picker dialog. |
destroy | .wheelColorPicker("destroy") | Destroy the assigned color picker function. |
updateValue | .wheelColorPicker("updateValue") | Update the input value from the color picker dialog. |
color | .wheelColorPicker("color", value) | Update the selection color on the color picker dialog. |
updateColor | .wheelColorPicker("updateColor", value) | Update the selection color on the color picker dialog. (deprecated) |
updateSelection | .wheelColorPicker("updateSelection") | Update color dialog selection to match current selectedColor value. |
The color picker dialog can be themed using CSS by defining styles of #jQWheelColorPickerDlg. This is the ID used by the dialog. For your note, while in general most of CSS properties can be defined, some properties such as size and positioning might not take effect.
Here's the basic markup of the color picker dialog.
<div id="jQWheelColorPickerDlg"> <div id="jQWheelColorPickerDlgWheel"> <span id="jQWheelColorPickerDlgCross"></span> </div> <span id="jQWheelColorPickerDlgArrow"></span> <span id="jQWheelColorPickerDlgSlider"> <span class="jqwcpSliderPoint"></span> ... </span> <span id="jQWheelColorPickerDlgArrowAlpha"></span> <span id="jQWheelColorPickerDlgSliderAlpha"> <span class="jqwcpSliderPoint"></span> ... </span> </div>
The example below changes the dialog background to white.
#jQWheelColorPickerDlg { background-color: white; }