mootools-color-picker v0.0.6

Mootools Color Picker

Color picker tools for Mootools.

Based on: http://colpick.com/plugin

Usage

Syntax:

new ColorPicker(element, [options])

Arguments:

• element - (DOM element) parent element used as position

• options - (object, optional)

  • color - (string: defaults to '3289c7')

    Default color, a string representing the color in hexadecimal

  • height - (number: defaults to 156)

    Representing the color panel's width and height. the side bue height in the tool is 156px, splited into 12 block, means 13px for each one.

    If you want to be compatible in old browers(like IE8 and blow), set this value be a multiple of 12. or there will be blank lines in the side hue.

  • flat - (boolean: defaults to false)

    If set to true, the picker will be append to element(which is setted in the constructor as the first parameter).

    If set to false, then will append to body, tags inside the response will be evaluated.if tags inside the response will be evaluated.

  • showEvent - (string: defaults to 'click')

    Event that shows the color picker, binded on element

  • onBeforeShow - (function) The function before show

  Callback function triggered before the color picker is shown.

  function(element) {}

  • onShow - (function)

  Callback function triggered when the color picker is shown.

  function(element) {}

  • onHide - (function)

    Callback function triggered when the color picker is hidden.

    function(element) {}

  • onChange - (function)

    Callback function triggered when the color is changed, has 3 parameters:

    • HEX string (with no #)
    • RGB object (eg. {r:255, g:0, b:0})
    • HSB object (eg. {h:0, s:100, b:100})

    function(HEX, RGB, HSB) {}

  • onSubmit - (function)

    Callback function triggered when the color is chosen, has 3 parameters:

    • HEX string (with no #)
    • RGB object (eg. {r:255, g:0, b:0})
    • HSB object (eg. {h:0, s:100, b:100})

    function(HEX, RGB, HSB) {}

Examples:

<script type="text/javascript" src="../colorpicker.js"></script>

<script type="text/javascript">
  var myPicker = new ColorPicker(element);
</script>

Or use Mootools Assets：

<script type="text/javascript">
  new Asset.javascript('../colorpicker.js', {
    onLoad: function() {
      var myPicker = new ColorPicker(element);
    }
  });
</script>

API: setColor

Change current color，will trigger the callback onChange

Syntax:

myPicker.setColor('#233233');

API: clickSubmit

Confirm picked color，will trigger the callback onSubmit

Syntax:

myPicker.clickSubmit();

Browsers Support

• IE 7+
• Chrome
• Firefox
• Safari