ColorPalette
is another
simple standalone widget that is helpful for providing a more visual
and interactive way of allowing a user to select a colorâperfect for
situations in which you allow the user to customize the theme of an
application, for example. By default, the palette comes in two canned
sizes, 3 Ã 4 or 7 Ã 10, with pre-selected popular web
colors.
Tip
You may already be wondering why you can't configure your own
set of colors for the palette. As it turns out, the palettes that
appear are images, not panes of HTML markup, and they were designed
this way for a11y reasons, even though it does not seem ideal. Thus,
if you want to extend ColorPalette
to display a custom
selection, it is certainly doableâyou'd just have to read the source
and get your hands dirty by hacking on some of the private
attributes.
Using a ColorPalette
in
markup is quite simple; the following listing illustrates:
<div dojoType="dijit.ColorPalette"> <script type="dojo/method" event="onChange" args="selectedColor"> /* hide the palette, perhaps? */ console.log(selectedColor); </script> </div>
Like ProgressBar
, ColorPalette
is a nice and simple
standalone. Table 15-4 shows the full
story.
Table 15-4. ColorPalette API
Name (default) | Type | Comment |
---|---|---|
| Integer | The duration before a
key that is held down becomes typematic. |
| Number | The amount of time that
is used to change the typematic rate. A value of |
| String | The size of the palette, which must be either 7 Ã 10 (the default) or 3 Ã 4. |
| Function | Extension point triggered when a color is selected. |
Programmatic creation is straightforward enough:
var cp = new dijit.ColorPalette({/*attributes go here */}); /* Now stick it somewhere on the page...*/ dojo.body( ).appendChild(cp.domNode);
Get Dojo: The Definitive Guide now with the O’Reilly learning platform.
O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.