DwtColorPicker: Difference between revisions

Line 14: Line 14:
<code>
<code>
   function launch() {
   function launch() {
     var DBG = new AjxDebug(AjxDebug.NONE, null, false);
     var DBG = new AjxDebug(AjxDebug.NONE, null, false);<br>
     /* 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);<br>
     /* 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 24: Line 24:
     * components in with existing HTML content
     * components in with existing HTML content
     */  
     */  
     shell.setVirtual();
     shell.setVirtual();<br>
     /*  
     /*  
     * 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
     */
     */
     var listener = new AjxListener(null, colorListener);
     var listener = new AjxListener(null, colorListener);
     var colorPicker = new DwtColorPicker(shell);
     var colorPicker = new DwtColorPicker(shell);<br>
     // add the listener to the widget
     // add the listener to the widget
     colorPicker.addSelectionListener(listener);
     colorPicker.addSelectionListener(listener);<br>
     // 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');<br>
     // Clean out any content
     // Clean out any content
     div.innerHTML = "";
     div.innerHTML = "";<br>
     // Reparent the picker's HTML element to the div
     // Reparent the picker's HTML element to the div
     colorPicker.reparentHtmlElement(div);
     colorPicker.reparentHtmlElement(div);

Revision as of 07:16, 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);

Jump to: navigation, search