Use the following code to create a basic inputEx ColorField.
new Y.inputEx.ColorField({parentEl: 'container1', label: 'Choose a color', description: 'Click to view the available colors'});
How to listen to the updated event :
var el = Y.one('#container2');
var field = new Y.inputEx.ColorField({parentEl: el });
var logDiv = inputEx.cn('div', null, null, "Log :");
el.appendChild(logDiv);
field.on('updated', function() {
logDiv.innerHTML += "Updated at "+(new Date());
logDiv.appendChild(inputEx.cn('br'));
});
The usual 'value' parameter:
new Y.inputEx.ColorField({parentEl: 'container3', value: '#ADC2FF'});
You can choose another predefined palette, or a set of custom colors.
new Y.inputEx.ColorField({parentEl: 'container4', palette:1, label:"Palette 1"});
new Y.inputEx.ColorField({parentEl: 'container4', palette:2, label:"Palette 2", cellPerLine:5});
new Y.inputEx.ColorField({parentEl: 'container4', palette:3, label:"Palette 3", cellPerLine:10});
new Y.inputEx.ColorField({parentEl: 'container4', palette:4, label:"Palette 4", cellPerLine:9});
new Y.inputEx.ColorField({parentEl: 'container4', palette:5, label:"Palette 5"});
new Y.inputEx.ColorField({parentEl: 'container4', palette:6, label:"Palette 6"});
new Y.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"]});