Check documentation for the latest version of dhtmlxSuite Object Constructor DHTMLX Docs

Object Constructor

var myColorPicker = new dhtmlXColorPicker({
    parent:         "c1",
    input:          "b1",
    target_color:   "cv1",
    target_value:   "v1",
    color:          "#0000ff",
    custom_colors:  ["#00f0f0",[22,66,77],"rgb(255,24,238)"],
    hide:           true,
    closeable:      false
});

parameters:

  • parent - (string|object) the id of an HTML element which will be used as a parent (or object itself), mandatory
  • input - (string|object) the area to which ColorPicker is linked (linkTo)
  • target_color - (string|object) the area (or its id) that will be colored in the chosen color
  • target_value - (string|object) the value of the chosen color
  • color - (string) the color initially set in ColorPicker (setColor)
  • custom_colors - (string|array|boolean) true to show a block of predefined custom colors; to fill the block set a string|array of colors
  • hide - (boolean) the default value is false, if true - the container is initially hidden and appears on clicking the element specified in the "input" parameter or after calling the show method
  • skin - (string) "dhx_skyblue","dhx_web", or "dhx_terrace"
  • closeable - (boolean) set to false to cancel closing of a colorpicker on clicking the "Cancel" button
<div id="my_picker_here"></div>
<script>
    //common init code
    var myColorPicker = new dhtmlXColorPicker("my_picker_here");
</script>

ColorPicker can also be initialized for several inputs at once. There are two variants of such initialization. You may use one of the snippets below:

<input type="text" id="inp1"/>
<input type="text" id="inp2"/>
<input type="text" id="inp3"/>
<script>
    //common init code
    var myColorPicker = new dhtmlXColorPicker(["inp1","inp2","inp3"]);
</script>

or

myColorPicker = new dhtmlXColorPicker([
    {
       input: "button1",
       target_color: "cv1",
       target_value: "inp1",
       color: "#05ff50"
    },
    {
       input: "button2",
       target_color: "cv2",
       target_value: "inp2",
       custom_colors: true
    },
    {
       input: "button3",
       target_color: "cv3",
       target_value: "inp3",
       color: "#f5005f",
       custom_colors: true
    }
]);
Back to top