Target readers are users (developers).
<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>
There are two ways to set image path in dhtmlxColorPicker:
<script>
myCP.setImagePath("[full path to this category]/codeabse/imgs/"); // should be used after creation of color picker's object
</script>
<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 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>The parameters the user should indicate are as follows:
var myCP = new dhtmlXColorPicker(container, isClickOnly, customColors, hide, fullview);
</script>
<script>When the page is loaded, a color picker will be displayed on page with the current color selected in it.
myCP.init();
</script>
<input type="text" id="colorPicker" colorbox="true" customcolors="true" selectonclick="true" fullview="true" selectedcolor="#00ff00">The parameters of the input are:
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").<script>
myCP = dhtmlXColorPickerInput("nolorPicker");
myCP.init();
</script>
The user can set one of the predefined skins for dhtmlxColorPicker in the following way:
Note: to set the default skin, the user should write an empty string as the parameter for setSkin() method.<script>
myCP.setSkin(skin);
</script>
4.1.1 Available Skins
The following skins are available for this component:
<script>This method sets new left (x) top (y) position of the component.
myCP.setPosition(x,y);
</script>
<script>The parameter color can be set like:
myCP.setColor(color);
</script>
<script>
myCP.setColor("#123456");
//or
myCP.setColor([56,34,12]);
//or
myCP.setColor("rgb(10,27,99)");
</script>
The color currently selected in the Color Picker can be easily got by method getSelectedColor():
<script>
var colorSelected = myCP.getSelectedColor();</script>
<script>
myCP.show();
myCP.hide();
</script>
<script>
myCP.close();
</script>
<input id="a1"> // create an input
<input id="a3"> //create one more input
<input type="button" value="Select color" id="a2"> // create a button
<script>
var myCP = new dhtmlXColorPicker(false,false,false,true);
myCP.setImagePath("[full path to this category]/codebase/imgs/");
myCP.init();
myCP.linkTo("a1","a2","a3"); //link to the button and the inputs
</script>
<script>The parameter colors is the array of predefined colors written in hex color format:
myCP.setCustomColors(colors);
</script>
<script>
myCP.setCustomColors("#aabbcc,#00ff00");
</script>
<script>When you have necessary language settings, you can switch between them using loadUserLanguage() method indicating the id of the language you used for its definition:
dhtmlxColorPickerLangModules = {};
dhtmlxColorPickerLangModules['en-us'] = {
langname: 'en-us',
labelHue : "Hue",
labelSat : "Sat",
labelLum : "Lum",
labelRed : "Red",
labelGreen : "Green",
labelBlue : "Blue",
btnAddColor : "Add to Custom Colors",
btnSelect : "Select",
btnCancel : "Cancel"
}
dhtmlxColorPickerLangModules['ru'] = {
langname: 'ru',
labelHue : "Ioo",
labelSat : "Ian",
labelLum : "??e",
labelRed : "E?an",
labelGreen : "Cae",
labelBlue : "Nei",
btnAddColor : "Aiaaaeou e aua?aiiui",
btnSelect : "Aua?aou",
btnCancel : "Ioiaia"
}
</script>
<script>
myCP.loadUserLanguage("ru");
</script>
<script>
myCP.hideOnSelect(true|false); // true by default
</script>
<script>
myCP.setOnCancelHandler(function (color) {
//some code
})
</script>
<script>
myCP.setOnCancelHandler(function () {
//some code
})
</script>