Skip to content
This repository

A Mootools plugin for choosing a color from a list of square boxes.

branch: master

Fetching latest commit…

Octocat-spinner-32-eaf2f5

Cannot retrieve the latest commit at this time

Octocat-spinner-32 Graphics
Octocat-spinner-32 Source
Octocat-spinner-32 README.md
Octocat-spinner-32 package.yml
README.md

MooColorPicker

A MooTools plugin for choosing a color from a list of square boxes.

Screenshot

How to use

JS sample:

#JS

// Create the color picker with some colors
var cp = new MooColorPicker($('cp'), {
    colors: [
        "#001B2E", "#479096", "#4A7390",
        "#036564", "#4F2634", "#B6BFAD", "#2D0D10"],
    defaultColor: 3 // Select #4A7390
});

// Display current color
$('current_color').set('html', 'Current color is: ' + cp.getCurrentColor());
cp.addEvent('change', function(col, box) {
    $('current_color').set('html', 'Current color is: ' + col);
});

HTML code:

#HTML

<div id="cp">Color picker container</div>
<div id="current_color">No color selected</div>

CSS rules:

#CSS

div.moocolorcheckbox {
    width: 24px;
    height: 24px;
    margin: 4px 2px 4px 0px;
    border: 1px solid white;
    border-radius: 4px;
    -moz-border-radius: 4px;
    -moz-box-shadow: 1px 1px 5px #cccccc;
    overflow: hidden; }

div.moocolorcheckbox_selected {
    width: 32px;
    height: 32px;
    margin: 0px 2px 0px 0px;
}

Docs

Implements: Options, Events

Syntax:

#JS

var cp = new MooColorPicker(container, options);
  • container: The <div> container (will be empty).

Options (object, optional): Initial options for the class. Options are:

  • colors: An array of strings, like ["#0123456", "#789ABC"].
  • defaultColor: Index of preselected color (default -1, none).
  • className: CSS class for single color <div> boxes (default 'moocolorcheckbox').
  • selectedClassName: CSS class for selected color <div> box (default 'moocolorcheckbox_selected').

Events:

  • change(color, item): Fires when selected color is changed. Color is selected color, item is the selected color <div> box.
  • mouseenter(div), mouseleave(div): Fires when mouse over or leave a color <div> box.

Methods:

  • addColor(color): Adds a color to the list.
  • removeColor(color): Removes a color from the list.
  • selectColor(color): Select a color if it is in the list.
  • getCurrentColor(): Returs current color as "#HHHHHH" string.
  • getContainer(): Return container <div>.
Something went wrong with that request. Please try again.