Color Picker

Features

• Quick & easy to install
• Pure Javascript (3KB only)
• Support reload in AJAX apps
• Appearance customizable
• Provides event handler when a color is selected
• Supported by all major browsers (including IE 6)

Installation

• Refer to mcColorPicker.js and mcColorPicker.css in the head section of your page
  <link href="colorpicker/mcColorPicker.css" rel="stylesheet" type="text/css" />
  <script src="colorpicker/mcColorPicker.js" type="text/javascript"></script>
• Add class="color" to desired <input> tags:
  <input type="text" class="color" />
  Usually the desired input is type="text". It can also be type="hidden" if needed.
  For ASP.NET, it can be the TextBox control.
• If the color input is to be generated later (e.g. in an AJAX callback), you can include a call MC.ColorPicker.reload(); in the callback:
  <script type="text/javascript"> function createForm() { document.getElementById("formContainer").innerHTML = '<input type="text" id="cinput2" class="color" value="#00aa00" />'; MC.ColorPicker.reload(); } </script>

Callback event handler

By default, selecting a color by the color picker will automatically update the value of the related input field. If you want additional tasks to be performed after selecting a color from the color picker, you can use the OnColorChanged event handler.

This handler function has two passed in parameters: the selected color, and the index of the chosen color picker.

The following is the implementation of the OnColorChanged handler for the demo:

You don't need to implement the event handler if you have no additional tasks when the color is changed.

Features

• Allow custom colors in the color palette
• Allow multiple Custom Color Pickers on the same page
• Small size (2kb packed Javascript)
• Appearance customizable

Installation

• Refer to customColorPicker.js and customColorPicker.css in the head section of your page
  <link href="colorpicker/customColorPicker.css" rel="stylesheet" type="text/css" />
  <script src="colorpicker/customColorPicker.js" type="text/javascript"></script>
• Add a color picker to your page by the following HTML markup:
  <span class="colorpicker"> <span class="bgbox"></span> <span class="hexbox"></span> <span class="clear"></span> <span class="colorbox"> <b class="selected" style="background:#A9BAD4" title="Light Blue"></b> <b style="background:#A1A4B3" title="Stone Blue"></b> <b style="background:#A49381" title="Sand"></b> <b style="background:#626878" title="Charcoal"></b> <b style="background:#2E436E" title="Navy Blue"></b> </span> </span>
  Note:
  • All color cells are defined as <b> tag contained in the span.colorbox. Each color is defined by its background style.
  • Elements span.bgbox and span.hexbox are optional. span.bgbox indicates the selected color by its background color, and span.hexbox indicates the selected color by the color cell's title.
  • Set class="selected" to the color cell that should be the default selected color.
  • You can add multiple Custom Color Pickers on the same page.

Callback event handler

The OnCustomColorChanged event handler can be used to perform any additional tasks.

This handler function has three parameters available: the selected color, the titile of the selected color, and the index of your chosen color picker (you may have multiple custom color pickers on the same page).

The following is the implementation of the OnColorChanged handler for the demo: