dijit.ColorPalette¶
| Authors: | Bill Keese, Nikolai Onken, Jared Jurkiewicz |
|---|---|
| Developers: | Declan Fahey, Bill Keese, Adam Peller, Becky Gibson, Pete Higgins |
| since: | V1.0 |
dijit.ColorPalette is a great little tool which provides a color picker for you to use in your application. The color palette size is definable. In addition, the color palette is accessible through screen readers as well as keyboard. The widget also supports the ‘standard’ dijit function onChange, which signals when a new selection was made from the palette.
Widget Construction Parameters¶
| Parameter | Description |
| palette | A string defining the size of the palette. Can only take one of two values, 7x10 or 3x4. The default value is 7x10. optional |
Return Values¶
As with all dijit widgets, the selected value can be obtained through the widget get(“value”) function. The return type is an instance of dojo.Color.
Examples¶
Default color palette¶
Default color palette, created programmatically:
require(["dijit/ColorPalette"], function(ColorPalette){
var myPalette = new ColorPalette({
palette: "7x10",
onChange: function(val){ alert(val); }
}, "placeHolder").startup();
});
<span id="placeHolder">this will be replaced</span>
Small color palette¶
Small color palette, created declaratively:
require(["dojo/parser", "dijit/ColorPalette"]);
<div data-dojo-type="dijit/ColorPalette" data-dojo-props="onChange:function(){alert(this.value);}, palette:'3x4'"></div>
Accessibility¶
Keyboard¶
| Action | Key |
|---|---|
| Navigate colors | Arrow keys |
| Pick a color | Spacebar or enter |
Screen Reader¶
Screen readers will read the name of each color as it is highlighted. For example, “white”, “seashell”, “cornsilk”, and so on.