Difference between revisions of "DwtColorPicker"
m |
|||
(12 intermediate revisions by 2 users not shown) | |||
Line 1: | Line 1: | ||
− | [[Zimbra AjaxTk]]->[[DHTML Widget Toolkit]]->[[Widgets]] | + | {{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 | + | ;<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
DwtColorPicker(parent, className, posStyle)
parent
- the widget parent, can be a
DwtShell
orDwtMenu
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);