jquery color picker plugin
In this section, you will learn how to implement color picker in your web page using jQuery plug-in.
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 :
