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