DOWNLOAD jQuery Color Picker v0.2 LICENSE jQcp is distributed under the terms of the MIT license

DEMONSTRATION

jQCP Demonstration 3 integrated with jQpopup, you can pick color from the popup box.

Download this Demostration!

You can adjust the color bar on the right so that the color will not always in black.

This demostration show you the way to get the return value when you click on the color bar and color chart.

You can remove the event handling if it is unnecessary for your implementation.

Color:

Color:

Color:

NEWS

• 2010/02/14 jQCP v0.2.1 released, fixed the issue on jQuery 1.4.
• 2009/05/16 jQCP v0.2 released.
• 2009/05/10 jQCP v0.1 released.

DESCRIPTION

• Simple HTML and jQuery.
• Powerful color control by HSL, RGB and Hex code.
• Easy to integate.
• Easy to customize the look & feel.
• jQCP tested with IE6, IE7, IE8, IE9, FF3, Opera9, Safari4, Google Chrome2.
• Lightweight color picker – The source file is just 7k!
• Free and Free of charge under the MIT License.

DOCUMENTATION

To initialize the jQCP

1. <script type=”text/javascript”>
2. $(document).ready(function() {
3. //initialize color picker object
4. $(“#color_picker”).jqcp();
5. //initialize the onclick event of the text box
6. $(“#color_value”).jqcp_setObject();
7. //change the color of the text box and set the initial value of the color picke
8. $(“#color_value”).jqcp_setColor(“#5EE9F4″);
9. });
10. </script>

To hidden all HSL and RGB textbox

You can hidden all HSL and RGB textbox, you can do it like this

1. <span style=”display:none”>
2. H:<input type=”text” id=”jqcp_h” size=”3″ value=”0″/>
3. S:<input type=”text” id=”jqcp_s” size=”3″ value=”0″/>
4. L:<input type=”text” id=”jqcp_l” size=”3″ value=”0″/><br/>
5. R:<input type=”text” id=”jqcp_r” size=”3″ value=”255″/>
6. G:<input type=”text” id=”jqcp_g” size=”3″ value=”255″/>
7. B:<input type=”text” id=”jqcp_b” size=”3″ value=”255″/><br/>
8. </span>

To hidden the text box

You can hidden the HSL or RGB textbox, just change input type from text to hidden

1. <input type=”hidden” id=”jqcp_h” size=”3″ value=”0″/>
2. <input type=”hidden” id=”jqcp_s” size=”3″ value=”0″/>
3. <input type=”hidden” id=”jqcp_l” size=”3″ value=”0″/>

To Upgrade from v0.1 to v0.2

Upgrade to v0.2, it is more flexible for you to change the object id easily!

1. //The original html element
2. <div id=”color_picker“></div>
3. <input type=”text” id=”color_value” class=”jqcp_value” size=”8″ value=”#FFFFFF”/>
4. //Here is the code changes between v0.1 and v0.2
5. jQuery(document).jQCP(); change to $(“#color_picker”).jqcp();
6. jQuery.jQCP.setColorObj(“color_value”); change to $(“#color_value”).jqcp_setObject();
7. jQuery.jQCP.setColor(“color_value”,”#5EE9F4″); change to $(“#color_value”).jqcp_setColor(“#5EE9F4″);