dhtmlxcolorpicker:initialization_of_dhtmlxcolorpicker [DHX documentation]

- Initialization of dhtmlxColorPicker

Initialization of dhtmlxColorPicker

dhtmlxColorPicker can be initialized on page either based on DIV element (in this case, its position is defined by position of this DIV), or attached to some text input (in this case, the position of the Color Picker will be assigned to the position of the INPUT element taking its visibility on page into account). So,the following ways of initialization are available for users of dhtmlxColorPicker:

DIV-based initialization;
Input-based initialization.

The first things that need to be done for any type of dhtmlxColorPicker's initialization are the following:

Download the dhtmlxColorPicker package from the server and place it in a folder;
Create an html file;
Place the full paths to dhtmlxColorPicker's CSS and JS files into the header of the created html file.

  <head>   
      <link rel="stylesheet" type="text/css" href="[full path to this file]/dhtmlxcolorpicker.css">
        <script src="[full path to this file]/dhtmlxcolorpicker.js"></script>     
  </script>

Setting Image Path

There are two ways to set image path in dhtmlxColorPicker:

Through setImagePath() - this method should be used to set the full path to the directory, where color picker image files are located:

  <script>
      myCP.setImagePath("[full path to this category]/codeabse/imgs/"); // should be used after creation of color picker's object
  </script>

As global JS variable window.dhx_globalImagePath:

  <head>
      ...
      <script src="[full path to this file]/dhtmlxcolorpicker.js"></script> 
      <script>window.dhx_globalImgPath="[full path to this category]/codebase/imgs/";</script> // sets image path
  </head>

DIV-Based Initialization

The user needs to create an object where dhtmlxColorPicker will be placed later. In this example the object is a <div> element on page which is placed in the <body> tag:

  <div id="colorPicker" style="position:absolute;top:150px;left:200px;"></div>

The next step is to create a new dhtmlXColorPicker and place it after the <div> element (object) that we've just created:

  <script>
     var myCP = new dhtmlXColorPicker(container, isClickOnly, customColors, hide, fullview);
  </script>

The parameters the user should indicate are as follows:

container(id) - id of the object inside which the Color Picker will be created;
isClickOnly(false|true) - this parameter is optional, it's set to false by default. If set to true, the color can be changed only by a left mouse click in the color selection box. False means that the color changes interactively while the user presses the left mouse button and drags the mouse pointer over the color selection box;
customColors(true|false) - this parameter is optional, it's set to false by default. If set to true, the user can add often used colors as custom ones that the color picker will remember and display every time the component is called;
hide(true|fasle) - this parameter is optional, it's set to false by default. It hides the component if set to true;
fullview (true/false) - this parameter is optional, it's set to false by default. Setting it to true means that the color picker will be displayed in its full view.

And the last command that should be called in order to initialize the component is:

  <script>
      myCP.init();
  </script>

When the page is loaded, a color picker will be displayed on page with the current color selected in it.

Input-Based Initialization

There is also the possibility to create a Color Picker linked to an input on page. First, the user should create the input itself, for example:

  <input type="text" id="colorPicker" colorbox="true" customcolors="true" selectonclick="true" fullview="true" selectedcolor="#00ff00">

The parameters of the input are:

id - id of the input;
colorbox(true|false) - a small square with the chosen color as a background appears in front of the input if set to true (optional parameter, set to false by default);
customcolors(true|false) - set to false by default. If set to true, the user can add most often used colors as custom ones that the color picker will remember and display every time the component is called (optional parameter);
selectonclick(true|false) - set to false by default. If set to true, the color in the color picker can be changed only by a left mouse click in the color selection box. False means that the color changes interactively while the user presses left mouse button and drags the mouse pointer over the color selection box (optional parameter);
fullview (true/false) - set to false by default. Setting it to true means that the color picker will be displayed in its full view (optional parameter);
selectedcolor(rgb(0,255,0)|#00ff00) - allows to set the default color that will be selected on startup.

And then, the following code creates the Color Picker and links in to the newly created input:

    <script>
        myCP = dhtmlXColorPickerInput("сolorPicker");
        myCP.init();
    </script>

The color picker will be activated when the user clicks somewhere in the input. When the necessary color is chosen, and button “Select” pressed, the color picker closes. The code of the chosen color is displayed in the input (for example, 77e5cd). Also, the chosen color itself can be displayed in the colorbox (in case the input has colorbox=“true”).