Skip to Content | Skip to Navigation


dojox.widget.ColorPicker

Status:Draft
Version:1.0
Project owner:Nathan Toone
Available:since V1.1

A Photoshop-like HSV ColorPicker widget.

Introduction

This ColorPicker adds many options to the standard ColorPallete available in Dijit.

Usage

To use the ColorPicker you need to first load the CSS:

1
  <link rel="stylesheet" href="dojotoolkit/dojox/widget/ColorPicker/ColorPicker.css" />

And Require the module:

1
dojo.require("dojox.widget.ColorPicker");

Examples

Programmatic example

<link rel="stylesheet" href="/_static/dojo/dojox/widget/ColorPicker/ColorPicker.css" />
<script type="text/javascript">
    dojo.require("dojox.widget.ColorPicker");
    dojo.addOnLoad(function() {
        var c = new dojox.widget.ColorPicker({},"picker1");
    });
</script>
<div id="picker1"></div>

Declarative example

<link rel="stylesheet" href="/_static/dojo/dojox/widget/ColorPicker/ColorPicker.css" />
<script type="text/javascript">
    dojo.require("dojox.widget.ColorPicker");
</script>
<div dojoType="dojox.widget.ColorPicker" id="picker2"></div>

A ColorPicker within a DropDownButton

<link rel="stylesheet" href="/_static/dojo/dojox/widget/ColorPicker/ColorPicker.css" />
<script type="text/javascript">
    dojo.require("dojox.widget.ColorPicker");
    dojo.require("dijit.form.DropDownButton");
</script>
<div dojoType="dijit.form.DropDownButton">
    <span>
        ColorPicker
    </span>
    <div dojoType="dojox.widget.ColorPicker" id="picker3"></div>
</div>

Notes

NOTE: as of Dojo 1.2, The ColorPicker is experimental, and doesn't implement the Dijit .attr() method for getting and setting values.