Login Register

ColorPalette

ColorPalette is a color picker for Web pages. You can do lots of stuff with this kind of widget like allowing your user to choose color for theming interactively. Color palette is an abstraction of popular hexa color codes by dijit.

Example

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
            "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>ColorPalette Demo</title>
    <style type="text/css">
        @import "http://o.aolcdn.com/dojo/1.0.0/dijit/themes/tundra/tundra.css";
        @import "http://o.aolcdn.com/dojo/1.0.0/dojo/resources/dojo.css"
    </style>
    <script type="text/javascript" src="http://o.aolcdn.com/dojo/1.0.0/dojo/dojo.xd.js"
        djConfig="parseOnLoad: true">
</script>
    <script type="text/javascript">
          dojo.require("dojo.parser");
          dojo.require("dijit.ColorPalette");
          function reportColor(selectedColor) {
              console.debug(selectedColor);
           }
     </script>
</head>
<body class="tundra">
        <div dojoType="dijit.ColorPalette" onChange="reportColor"></div>
</body></html>

dijit.ColorPalette
Grid showing various colors, so the user can pick a certain color
Attributes
defaultTimeout Number
500
The number of milliseconds before a held key or button becomes typematic
timeoutChangeRate Number
0.90
Fraction of time used to change the typematic timer between events; 1.0 means that each typematic event fires at defaultTimeout intervals < 1.0 means that each typematic event fires at an increasing faster rate
palette String
7x10
Size of grid, either "7x10" or "3x4".
Extension Points
onChange(/* String */color) Callback when a color is selected. Parameter is the hex color.

Accessibility

Keyboard

ActionKey
Navigate colorsArrow keys
Pick a colorSpacebar 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.