Color widgets

You currently have two color widgtes available in the DHTML Suite. They are created by the

classes.

It is also important to notice that these widgets doesn't write anything to the screen unless you ask them to. The scripts creates a div for the widget, and it's up to you what you want to do with it. You'll get a reference to the div by using the getDivElement() method.

One example how to do this is in the window script where I append them to tabs like this:

myWindow.appendContent('windowContent1',webColorPalette.getDivElement());
myWindow.appendContent('windowContent1',webColorPalette2.getDivElement());
myWindow.appendContent('windowContent2',colorSlider.getDivElement());
myWindow.appendContent('windowContent3',namedColorPalette.getDivElement());

DHTMLSuite.colorPalette

DHTMLSuite.colorPalette is the simplest of these two widgets. What it does is to create a palette of colors.

This is one example:

var webColorPalette2 = new DHTMLSuite.colorPalette( { width:300,callbackOnColorClick:'setColor' } );
webColorPalette2.addGrayScaleColors(32);
webColorPalette2.init();

This creates a palette with 32 gray scale colors between 0 and 255(FF). The addGrayScaleColors method also accepts two range parameters in case you want to limit the range of the colors. Example: webColorPalette2.addGrayScaleColors(16,0,15) will create the colors #010101, #020202, #030303, #040404 .... #0F0F0F.

You also have the addAllWebColors and addAllNamedColors methods which can be used to add the 216 "web safe" colors to the palette or all the named colors. Custom colors can also been added by the addColor method. This method takes two arguments. The first one is the rgb code, while the second one(optional) is the title of this color.

When you are finished adding colors to the palette, you call the init method to create the div.

The colorPalette widget supports one callback function named callbackOnColorClick. You can specify it, by sending it to the constructor as shown in the example above. When a color is clicked, the function named "setColor" will be executed. This will receive an associative array as only argument. Keys in this array are rgb and name. This is how the setColor function may look like:

function setColor(color)
{
	var obj = document.getElementById('colorDiv');
	if(color.name)obj.innerHTML = color.name;else obj.innerHTML=color.rgb;
	obj.style.backgroundColor = color.rgb;
}

This sets the background color of the div with id "colorDiv" to the clicked color.

DHTMLSuite.colorWidget

This widget creates the color widget which you see under the "Advanced color picker" tab. This is the code used to create this widget:

var colorWidget = new DHTMLSuite.colorWidget({ callbackOnChangeRgb : 'setColor' });
colorWidget.init();
colorWidget.setRgbColor('#AA5033');

And we have appended the DIV to the window with the line shown above:

myWindow.appendContent('windowContent2',colorSlider.getDivElement());

The constructor of this widget accepts an associative array of properties. Possible properties are:

For example click on one of the links below:

And open the tab to see the changes.

For more info, see the class documentation.