Difference between revisions of "DwtColorPicker"

m
 
(16 intermediate revisions by 2 users not shown)
Line 1: Line 1:
 +
{{Archive}}[[Zimbra AjaxTk]]->[[DHTML Widget Toolkit]]->[[Widgets]]
 +
----
 +
 
<code>DwtColorPicker(parent, className, posStyle)</code>
 
<code>DwtColorPicker(parent, className, posStyle)</code>
*<code>parent</code> the widget parent, can be a DwtShell (or a DwtMenu????)
+
;<code>parent</code> : the widget parent, can be a <code>DwtShell</code> or <code>DwtMenu</code>
<code>className</code> the name of a css style class to be assigned to the widget
+
;<code>className</code> : the name of a css style class to be assigned to the widget
<code>posStyle</code>  
+
;<code>posStyle</code> :
 +
 
 +
Generates <code>DwtSelectionEvent()</code> on seletion. The hex RGB of the color seleted is found in the <code>detail</code> variable.
 +
 
 +
<code>var colorCode = event.detail;</code>
 +
 
  
 
== Overview ==
 
== 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
 
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 ==
 +
<code>
 +
  function launch() {
 +
    var DBG = new AjxDebug(AjxDebug.NONE, null, false);<br>
 +
    /* 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);<br>
 +
    /* 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();<br>
 +
    /*
 +
    * 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);<br>
 +
    // add the listener to the widget
 +
    colorPicker.addSelectionListener(listener);<br>
 +
    // Get the div into which we want to place the picker
 +
    var div = document.getElementById('primary_color_picker');<br>
 +
    // Clean out any content
 +
    div.innerHTML = "";<br>
 +
    // 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);
 +
 +
</code>
 +
 +
 +
{{Article Footer|unknown|4/4/2006}}
 +
 +
[[Category:Zimbra AjaxTk]]

Latest revision as of 12:29, 24 March 2015

Zimbra AjaxTk->DHTML Widget Toolkit->Widgets

DwtColorPicker(parent, className, posStyle)

parent 
the widget parent, can be a DwtShell or DwtMenu
className 
the name of a css style class to be assigned to the widget
posStyle 

Generates DwtSelectionEvent() on seletion. The hex RGB of the color seleted is found in the detail variable.

var colorCode = event.detail;


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);


Verified Against: unknown Date Created: 4/4/2006
Article ID: https://wiki.zimbra.com/index.php?title=DwtColorPicker Date Modified: 2015-03-24



Try Zimbra

Try Zimbra Collaboration with a 60-day free trial.
Get it now »

Want to get involved?

You can contribute in the Community, Wiki, Code, or development of Zimlets.
Find out more. »

Looking for a Video?

Visit our YouTube channel to get the latest webinars, technology news, product overviews, and so much more.
Go to the YouTube channel »

Jump to: navigation, search