Fork me on GitHub

Example: Basic color field creation

How to create a color field.

Basic ColorField creation

Use the following code to create a basic inputEx ColorField.

Updated event

How to listen to the updated event :

Setting the color

The usual 'value' parameter:

Using a different palette

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

HTML

<div class='demoContainer' id='container1'></div>
<div class='demoContainer' id='container2'></div>
<div class='demoContainer' id='container3'></div>
<div class='demoContainer' id='container4'></div>

JavaScript

Implementation

YUI().use('inputex-color', function(Y) {
    
    // example 1
    new Y.inputEx.ColorField({parentEl: 'container1', label: 'Choose a color', description: 'Click to view the available colors'});
    
    // example 2
    var el = Y.one('#container2');
    var field = new Y.inputEx.ColorField({parentEl: el });
    var logDiv = Y.inputEx.cn('div', null, null, "Log :");
    el.appendChild(logDiv);
    field.on('updated', function (value) {
        logDiv.innerHTML += "Updated at " + (new Date()) + " with value: " + value;
        logDiv.appendChild(Y.inputEx.cn('br'));
    });
    
    // example 3
    new Y.inputEx.ColorField({parentEl: 'container3', value: '#ADC2FF'});
    
    // example 4
    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"]});
    
});