DwtColorPicker: Difference between revisions
Line 15: | Line 15: | ||
function launch() { | function launch() { | ||
var DBG = new AjxDebug(AjxDebug.NONE, null, false); | var DBG = new AjxDebug(AjxDebug.NONE, null, false); | ||
/* We always have to create a DwtShell as the root of our component | /* We always have to create a DwtShell as the root of our component | ||
* hierarchy and does some handy things for us. | * hierarchy and does some handy things for us. | ||
*/ | */ | ||
var shell = new DwtShell("MainShell", false, null, null, true); | var shell = new DwtShell("MainShell", false, null, null, true); | ||
/* Setting the shell to be virtual tells it that it should remain hidden. | /* Setting the shell to be virtual tells it that it should remain hidden. | ||
* Direct children of the shell will actually have their HTML elements | * Direct children of the shell will actually have their HTML elements | ||
Line 27: | Line 25: | ||
*/ | */ | ||
shell.setVirtual(); | shell.setVirtual(); | ||
/* | /* | ||
* Now we will create a listener to handle the selection and the picker widget | * Now we will create a listener to handle the selection and the picker widget | ||
Line 33: | Line 30: | ||
var listener = new AjxListener(null, colorListener); | var listener = new AjxListener(null, colorListener); | ||
var colorPicker = new DwtColorPicker(shell); | var colorPicker = new DwtColorPicker(shell); | ||
// add the listener to the widget | // add the listener to the widget | ||
colorPicker.addSelectionListener(listener); | colorPicker.addSelectionListener(listener); | ||
// Get the div into which we want to place the picker | // Get the div into which we want to place the picker | ||
var div = document.getElementById('primary_color_picker'); | var div = document.getElementById('primary_color_picker'); | ||
// Clean out any content | // Clean out any content | ||
div.innerHTML = ""; | div.innerHTML = ""; | ||
// Reparent the picker's HTML element to the div | // Reparent the picker's HTML element to the div | ||
colorPicker.reparentHtmlElement(div); | colorPicker.reparentHtmlElement(div); | ||
} | } | ||
function colorListener(event) | function colorListener(event) { | ||
// just an alert box with the selected color number | // just an alert box with the selected color number | ||
alert(event.detail); | alert(event.detail); |
Revision as of 07:15, 5 April 2006
Zimbra AjaxTk->DHTML Widget Toolkit->Widgets
DwtColorPicker(parent, className, posStyle)
parent
- the widget parent, can be a DwtShell (or a DwtMenu????)
className
- the name of a css style class to be assigned to the widget
posStyle
Overview
Creates a color picker displaying "Web safe" colours. Instances of this class may be used with DwtMenu to create a ColorPicker menu. Clicking on a color cell generates a DwtSelectionEvent the detail attribute of which contains the color string associated the cell on which the user clicked
Example
function launch() {
var DBG = new AjxDebug(AjxDebug.NONE, null, false);
/* We always have to create a DwtShell as the root of our component
* hierarchy and does some handy things for us.
*/
var shell = new DwtShell("MainShell", false, null, null, true);
/* Setting the shell to be virtual tells it that it should remain hidden.
* Direct children of the shell will actually have their HTML elements
* reparented to the body element. This is handy when we want to mix
* components in with existing HTML content
*/
shell.setVirtual();
/*
* Now we will create a listener to handle the selection and the picker widget
*/
var listener = new AjxListener(null, colorListener);
var colorPicker = new DwtColorPicker(shell);
// add the listener to the widget
colorPicker.addSelectionListener(listener);
// Get the div into which we want to place the picker
var div = document.getElementById('primary_color_picker');
// Clean out any content
div.innerHTML = "";
// Reparent the picker's HTML element to the div
colorPicker.reparentHtmlElement(div);
}
function colorListener(event) {
// just an alert box with the selected color number
alert(event.detail);
}
// Make it happen
AjxCore.addOnloadListener(launch);