# inputEx - ColorField Usage

## Basic ColorField creation

Use the following code to create a basic inputEx ColorField.

new inputEx.ColorField({parentEl: 'container1', label: 'Choose a color', description: 'Click to view the available colors'});

## Updated event

How to listen to the updated event :

var el = YAHOO.util.Dom.get('container2'); var field = new inputEx.ColorField({parentEl: el }); var logDiv = inputEx.cn('div', null, null, "Log :"); el.appendChild(logDiv); field.updatedEvt.subscribe(function() { logDiv.innerHTML += "Updated at "+(new Date()); logDiv.appendChild(inputEx.cn('br')); });

## Setting the color

The usual 'value' parameter:

new inputEx.ColorField({parentEl: 'container3', value: '#ADC2FF'});

## Using a different palette

You can choose another predefined palette, or a set of custom colors.

new inputEx.ColorField({parentEl: 'container4', palette:1, label:"Palette 1"}); new inputEx.ColorField({parentEl: 'container4', palette:2, label:"Palette 2", cellPerLine:5}); new inputEx.ColorField({parentEl: 'container4', palette:3, label:"Palette 3", cellPerLine:10}); new inputEx.ColorField({parentEl: 'container4', palette:4, label:"Palette 4", cellPerLine:9}); new inputEx.ColorField({parentEl: 'container4', palette:5, label:"Palette 5"}); new inputEx.ColorField({parentEl: 'container4', palette:6, label:"Palette 6"}); new inputEx.ColorField({parentEl: 'container4', label:"Custom colors", colors:["#D0D0D0","#31A8FA","#8EC1E5","#58D7CF","#89E2BB","#A7F7F8","#F6B77C","#FE993F","#EEEEEE","#84CBFC","#BCDAF0","#9BE7E3","#B9EED7","#CBFBFB","#FAD4B1","#FFC28C","#FE6440","#F56572","#FA9AA3","#F7B1CA","#E584AF","#D1C3EF","#AB77B8","#C69FE7","#FFA28D","#F9A3AB","#FCC3C8","#FBD1E0","#F0B6CF","#E4DBF6","#CDAED5","#DDC6F1"]});