Class: Colorcircle
Colorcircle is a Mootols 1.2.0 based Colorpicker.
Important: You also need the Mootools Color-Plugin to get it working.
Report bugs to email please.
Download
Colorcircle 1.0 | Colorcircle 1.0 with minimal required Mootools | |
---|---|---|
uncompressed | Download | Download |
YUI Compressor | Download | Download |
Note: If you take Colorcircle with minimal required Mootools version, you don't need to include moootools.js.
Demo
Basic Usage
-
Include mootools.js (if you haven't allready) and colorcircle.js in your HTML.
<script type="text/javascript" src="mootools.js"></script> <script type="text/javascript" src="colorcircle/colorcircle.js"></script>
-
Create a placeholder div wherever you want the Colorcircle to be placed.
<div id="placeholder"></div>
-
Create a JavaScript-Tag, add a load event and call the constructor.
<script type="text/javascript"> window.addEvent("load", function() { new Colorcircle("placeholder"); }); </script>
Colorcircle Method: constructor
Syntax:
var colorcircle = new Colorcircle(container[, properties]);
Arguments:
- container - (mixed) The tag name of the div to be created in or an actual DOM element.
- properties - (object, optional) Sets the properties of the Colorcircle
Properties:
- color - (mixed: defaults to #F00) The start color; A string, an array representation of a color or a Mootools-Color Object.
- onChange - (function) A function which is called when color changes.
- onInitialize - (function) A function which is called when Colorcircle is initialized.
- size - (int: defaults to 200) Only needed if you change the graphics circle.png and mask.png. Note that mask.png should be half size of mask.png allways.
- directory - (String: defaults to colorcircle/) Directory which contains the images circle.png and mask.png.
Returns:
- (object) A new Colorcircle instance.
Example:
var colorcircle = new Colorcircle("myContainer", { color: "#0f0", onChange: function(color) { alert(color.hex); }, onInitialize: function(color) { alert(color.hsb); } size: 200, directory: "colorcircle/" });
Event change:
- (function) Function to execute on change.
Signature:
onChange(color)
Arguments
- color - (object) A Mootools-Color Object.
Example:
var colorcircle = new Colorcircle("myElement"); colorcircle.addEvent("change", function(color) { alert(color.hex); });
Colorcircle Method: setColor
Sets a new Color of the Colorcircle.Syntax:
myColorcircle.setColor(color);
Arguments:
- color - (mixed) A string, an array representation of a color or a Motools-Color Object.
Colorcircle Attributes:
- color - (object) A Mootools-Color Object.