Initialization

There are two ways of initializing dhtmlxColorPicker: inside a container or inside a popup. Both ways are described below in detail.

In general, to create dhtmlxColorPicker on a page, you need to take the following simple steps:

<!DOCTYPE html>
<html>
    <head>
        <title>How to Start with dhtmlxColorPicker</title>         
        <script type="text/javascript" src="../../codebase/suite.js"></script>
        <link rel="stylesheet" href="../../codebase/suite.css">
    </head>
    <body>
        <div id="colorpicker_container"></div>
        <script>
            // creating dhtmlxColorPicker 
            var colorpicker = new dhx.ColorPicker("colorpicker_container",{
                // config options
            });
</script> </body> </html>

Related sample:  Basic initialization - DHTMLX Colorpicker

Include source files

Create an HTML file and place full paths to JS and CSS files of the dhtmlxSuite library into the header of the file. The files are:

  • suite.js
  • suite.css
<script type="text/javascript" src="../../codebase/suite.js"></script>
<link rel="stylesheet" href="../../codebase/suite.css">

Initialize ColorPicker

You can initialize ColorpIcker in a container or in a popup.

Initialization in a container

In this case you initialize ColorPicker with the dhx.Colorpicker object constructor. The constructor takes two parameters:

  • the HTML container for ColorPicker,
<div id="colorpicker_container"></div>
  • an object with configuration properties (see the full list below). If this argument is not passed to the constructor, the settings will be default.

colorpicker.html

// creating dhtmlxColorPicker
var colorpicker = new dhx.ColorPicker("colorpicker_container",{
   // config options
});

Related sample:  Basic initialization - DHTMLX Colorpicker

Initialization in a popup

This variant pressupposes that you create a popup first and then attach a colorpicker into it.

  • use corresponding object constructors to create a colorpicker and a popup objects. Note that in this case null is used instead of container for ColorPicker:
var colorpicker = new dhx.Colorpicker(null, { customColorsList: ["#f2f2f2"] });
var popup = new dhx.Popup();
  • attach the colorpicker to the popup using the attach method of Popup:
popup.attach(colorpicker);
  • use the show / hide methods of Popup to control when a popup with color picker should be shown/hidden. For example:
popup.show("showButton");
 
var colorExample = document.querySelector(".dhx_color-sample");
    colorpicker.events.on("colorChange", function (color) {
        colorExample.style.backgroundColor = color;
        popup.hide();
});

Related sample:  Colorpicker inside popup - DHTMLX Colorpicker

Configuration properties

  • palette - (array) contains arrays of colors you want to be shown in a colorpicker
  • paletteOnly - (boolean) defines whether ColorPicker is shown only the palette mode
  • pickerOnly - (boolean) defines whether ColorPicker is shown only the picker mode
  • grayShades - (boolean) defines whether the section with gray shades is displayed in the palette
  • customColors - (boolean) shows a section for custom colors in the bottom part of the colorpicker
  • width - (string) sets the width of ColorPicker
  • css - (string) adds CSS classes for the component

The detailed information on configuration options can be found in the Configuration article.

Select initial color (optional)

You can specify the color that should be selected in the palette after ColorPicker initialization with the help of the setValue method:

var colorpicker = new dhx.ColorPicker({
   // config options
});
colorpicker.setValue("#BDF0E9");

Related sample:  Set value - DHTMLX Colorpicker

Back to top