jQuery Color Picker v0.3.1

• jQuery Color Picker v0.2

• 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.

• 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.

jQCP Documentation

You can check all code details in index.html.
If you have further questions, please contact us through our Knowledge Sharing Board.

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");