ColorPalette
Submitted by simonjb on Sat, 05/05/2007 - 21:02.
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>
"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
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.
- Printer-friendly version
- Login or register to post comments
- Unsubscribe post