Share on Google+Share on Google+

jquery color picker plugin

Advertisement
In this section, you will learn how to implement color picker in your web page using jQuery plug-in.

Color picker jQuery plug-in

In this section, you will learn how to implement color picker in your web page using jQuery plug-in. In the given below example, color picker is implemented in web page in four different types. First ,flat type, directly implement the color picker on web page. Second, by changing the skin of color picker using 'css' file. Third ,by attaching to an text field and using callback functions to update the color with field's value and set the value back in the field by submitting the color. And last ,by attaching to DOM Element and using callbacks to live preview the color and adding animation.

colorPicker.html

<html>
<head>
<link rel="stylesheet" href="colorPicker/colorpicker.css" type="text/css" />
<link rel="stylesheet" media="screen" type="text/css" href="colorPicker/layout.css" />
<title>jQuery ColorPicker plugin</title>
<script type="text/javascript" src="jquery-1.4.2.js"></script>
<script type="text/javascript" src="colorPicker/colorpicker.js"></script>
<script type="text/javascript" src="colorPicker/eye.js"></script>
<script type="text/javascript" src="colorPicker/utils.js"></script>
<script type="text/javascript" src="colorPicker/layout.js?ver=1.0.2"></script>
</head>
<body>
<div class="wrapper">
<h1>jQuery Color Picker plugin</h1>

<p>Flat mode.</p>
<br>
<p id="colorpickerHolder">
</p>
<br>

<p>Custom skin and using flat mode to display the color picker in a custom widget.</p>
<br>
<div id="customWidget">
<div id="colorSelector2"><div style="background-color: #00ff00"></div></div>
<div id="colorpickerHolder2">
</div>
</div>
<br>

<p>Attached to an text field and using callback functions to update the color with field's value and set the value back in the field by submiting the color.</p>
<br>
<p><input type="text" maxlength="6" size="6" id="colorpickerField1" value="00ff00" /></p>
<p><input type="text" maxlength="6" size="6" id="colorpickerField3" value="0000ff" /></p>
<p><input type="text" maxlength="6" size="6" id="colorpickerField2" value="ff0000" /></p>
<br>
<p>Attached to DOMElement and using callbacks to live preview the color and adding animation.</p>
<br>
<p>
<div id="colorSelector"><div style="background-color: #0000ff"></div></div>
</p>
<br>
</div>
</body>
</html>

OUTPUT

When you click for custom color picker :

When you click or change any input field for color :

 

Download Source Code

Click here to see demo

Advertisements

Advertisement

Posted on: August 14, 2010 If you enjoyed this post then why not add us on Google+? Add us to your Circles

Share this Tutorial Follow us on Twitter, or add us on Facebook or Google Plus to keep you updated with the recent trends of Java and other open source platforms.