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="dojox/widget/ColorPicker/ColorPicker.css" />

And Require the module:

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

Examples

Programmatic example

<link rel="stylesheet" href="{{baseUrl}}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="{{baseUrl}}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="{{baseUrl}}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.

Error in the documentation? Can’t find what you are looking for? Let us know!