ProColor

Copyright © 2009, Sean Werkema. All rights reserved.

Overview & Usage | Options | Public API | Examples | License | Download | Source Code | Changelog

ProColor has been tested and found to perform correctly in the following browsers:

Overview

ProColor is a simple, flexible, easy-to-use color-picker for the Prototype Javascript framework. ProColor is designed to be friendly to artists and programmers both. This user's manual both documents ProColor and demonstrates it in action.

ProColor is compatible with IE6+, Firefox 2+, Safari 3+, Opera 9+, and Chrome. It is not compatible with very old browsers, but it does at least fall back to a simple text-edit field for old browsers. It runs very well on Safari and Chome, reasonably well on Firefox and Opera, and is usable (if slow) on IE.

My blog postings about ProColor

Basic Usage

Usage is straightforward. Include "prototype.js" and then "procolor.js" (or better yet, include the compressed version, "procolor.compressed.js"), and then make this call to create a color-picker:

new ProColor(options);

For example, for a static color picker:

new ProColor({ mode:'static', parent:container_element });

Or for a drop-down/popup color picker:

new ProColor({ mode:'popup', input:input_element });

If you want a drop-down color picker the easy way, it's better to use the button factory method to create them:

<input type='text' value='#FF0000' id='mycolor' /> ... ProColor.prototype.attachButton('mycolor', options);

Or if that's still too hard, you can make it even simpler by using the automatic factory method that runs during onload. This factory method uses the current setting of ProColor.prototype.options for its options, and creates a button attached to any <input> whose class contains 'procolor':

<input type='text' value='#FF0000' class='procolor' />

Examples of all of these methods of creating a color-picker are included in this user's manual.

The only files required to actually use ProColor are prototype.js (Prototype), procolor.js or procolor.compressed.js, and the various PNG and GIF and JPEG images found in the img/ directory: