Difference between revisions of "DwtColorPicker"

Line 13: Line 13:
 
== Example ==
 
== Example ==
 
<code>
 
<code>
 +
  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)
 
   function colorListener(event)
 
   {
 
   {
Line 18: Line 52:
 
     alert(event.detail);
 
     alert(event.detail);
 
   }
 
   }
 +
 +
  // Make it happen
 +
  AjxCore.addOnloadListener(launch);
 +
 
</code>
 
</code>

Revision as of 07:13, 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