jQuery Color Picker Plugin - wColorPicker
File Size: | 68.1KB |
---|---|
Views Total: | 2253 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

wColorPicker is a lightweight and fast jQuery plugin that adds a clean color picker to your web page. Comes with hover event, click event and supports some animation effects.
Basic Usage:
1. Include jQuery library and wColorPicker.js
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <script type="text/javascript" src="wColorPicker.js"></script>
2. Include wColorPicker CSS
<link rel="Stylesheet" type="text/css" href="wColorPicker.css" />
3. Markup
<div id="wColorPicker1" class="hoverBox"> <input id="wColorPicker_input1" type="text"/> </div>
4. Call the plugin with options
<script type="text/javascript"> $("#wColorPicker1").wColorPicker({ initColor: '#FF00FF', onSelect: function(color){ $("#wColorPicker_input1").css('background', color).val(color); }, onMouseover: function(color){ $("#wColorPicker_input1").css('background', color).val(color); }, onMouseout: function(color){ $("#wColorPicker_input1").css('background', color).val(color); } }); </script>
5. More Options
$('#wColorPicker1').wColorPicker({ theme : 'black', // colors - black, white, cream, red, green, blue, yellow, orange, plum opacity : 0.8, // opacity level initColor : '#FF0000', // initial colour to set palette to onMouseover : null, // function to run when palette color is moused over onMouseout : null, // function to run when palette color is moused out onSelect : null, // function to run when palette color is selected mode : 'flat', // flat mode inserts the palette to container, other modes insert button into container - hover, click buttonSize : 20, // size of button if mode is ohter than flat effect : 'slide', // none/slide/fade showSpeed : 500, // time to run the effects on show hideSpeed : 500 // time to run the effects on hide });
Change log:
v2.1.7 (2013-09-27)
- Updated cursor for auto generated button
- Updated rgbHex to v1.1.2.
This awesome jQuery plugin is developed by websanova. For more Advanced Usages, please check the demo page or visit the official website.