Requires: jQuery.
Optional: mDOMupdate. - for automatically converting dynamically created color inputs. (dynamically added via jQuery)
Install: Add the line after jQuery.
<script type="text/javascript" src="http://meta100.github.com/mColorPicker/javascripts/mColorPicker_min.js" charset="UTF-8"></script>
Or download from https://github.com/meta100/mColorPicker.
Use: Insert HTML5 markup for color picker.
Example 1:
<input type="color" />Example 1
Example 2:
The value you set for the input element will define the initial value of the color picker.
<input type="color" value="#ff0667" />Example 2
Example 3:
Setting data-hex=”true” outputs hex colors as apposed to the default rgb.
<input type="color" value="#ff0667" data-hex="true" />Example 3
Example 4:
If you set the input elements attribute data-text=”hidden” the text input will be hidden and no color wheel will show. Instead, the size of the input element will be used as a clickable color picker trigger. Set the height and width of the input to set the size of the clickable color picker trigger.
<input type="color" value="#ff0667" data-text="hidden" style="height:20px;width:20px;" />Example 4
Example 5:
Added an event ‘colorpicked’ that will trigger when a color is chosen in the colorpicker.
<input id="color_5" type="color" value="#ff0667" data-text="hidden" style="height:20px;width:20px;" />
<script type="text/javascript">
$(document).ready(function () {
$('#color_5').bind('colorpicked', function () {
alert($(this).val());
});
});
</script>Example 5