Meta100 Blog
Designing Fun.
RSS  |  Archive    

mColorPicker

A simple lite jQuery color picker plugin with a swatch to remember the last 10 colors chosen, that uses html5 markup.


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

Notes

  1. buy-steroids-uk-org reblogged this from meta100
  2. meta100 posted this

  5:53 pm, by meta100, [ 32 notes ] Comments