jQuery Wheel Color Picker Example


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.

Overview

Initialize the color picker to an element by simply calling:

.wheelColorPicker( options );

Example

<input type="text" class="colorpicker" />
<script type="text/javascript">
	$(function() { $('.colorpicker').wheelColorPicker({ dir: '.' }); });
</script>

Options

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.

Methods

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.

Theming

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>

Example

The example below changes the dialog background to white.

#jQWheelColorPickerDlg {
	background-color: white;
}


Copyright © 2011 Fajar Yoseph Chandra.