mooRainbow 1.4

mooRainbow is a Color-Picker which was originally written by Djamil Legato (w00fz).
You can attach mooRainbow to any DOM Element. mooRainbow will be opened by clicking on this element. Works with mooTools 1.3 and 1.4.

Screenshot



Details

Author
Christopher Beloch
Current version
1.4
GitHub
CBeloch/mooRainbow
Downloads
4416
Category
Widgets
Tags
Report
GitHub Issues

Releases


Dependencies

  • core/1.3: *
  • more/1.3:
    • Slider
    • Drag
    • Color

How to use

Add the mooRainbow JS and CSS File to your website

<link rel="stylesheet" href="Assets/mooRainbow.css" type="text/css" />

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

Now you have an input field somewhere on your website, the code could look like this:

<strong>Color:</strong>
<input type="text" id="titleColor" name="titleColor" />

To attach a mooRainbow instance to this input field, you simply use the following code:

var r = new MooRainbow('titleColor', {
    imgPath: 'Assets/images/', // if this value is not set, mooRainbow will search for images in images/ 
    onChange: function(color) {
        this.element.value = color.hex;
    }
});

Thats it!


Detailed Documentation

Syntax:

var myMooRainbow = new MooRainbow(element, options);

Arguments:

  1. element - the element where you want to attach mooRainbow
  2. options - options, see below for more details

Options

  • id - the id of mooRainbow (default: 'mooRainbow')
    Note: every object must have an unique id.
  • prefix - the prefix for your CSS classnames (default: 'moor-')
    i.e.: prefix: 'moor-' => in your CSS: .moor-okButton { color: #fff; }
  • imgPath - the path where the slider and the overlay images are contained (default: 'images/')
    Note: always put the '/' at the end
  • startColor - an array. the color you want MooRainbow starts with (default: [255, 0, 0])
    Note: it must be an RGB color given as array [RED, GREEN, BLUE]
  • onChange - a function to fire when the color change

Screenshots


Discuss

A note on comments here: These comments are moderated. No comments will show up until they are approved. Comments that are not productive (i.e. inflammatory, rude, etc) will not be approved.

Found a bug in this plugin? Please report it this repository's Github Issues.

blog comments powered by Disqus