ZCS 6.0:Zimlet Developers Guide:Examples:Custom Tool Tip: Difference between revisions
No edit summary |
No edit summary |
||
(4 intermediate revisions by 4 users not shown) | |||
Line 1: | Line 1: | ||
{| cellspacing="0" cellpadding="5" style="border: 1px solid rgb(153, 153, 170); margin: 0pt 0.5em 0.5em 0pt; float: none; background-color: rgb(249, 249, 255);" | {{BC|Community Sandbox}} | ||
__FORCETOC__ | |||
<div class="col-md-12 ibox-content"> | |||
=ZCS 6.0: Zimlet Developer Guide:Examples:Custom Toll Tip= | |||
{{KB|{{Unsupported}}|{{ZCS 7.0}}|{{ZCS 6.0}}|}} | |||
{{WIP}}{| cellspacing="0" cellpadding="5" style="border: 1px solid rgb(153, 153, 170); margin: 0pt 0.5em 0.5em 0pt; float: none; background-color: rgb(249, 249, 255);" | |||
|[[Image:zdg-6-menu-icon-zimbra.jpg|20px]] | |[[Image:zdg-6-menu-icon-zimbra.jpg|20px]] | ||
|[[ZCS 6.0:Zimlet Developers Guide:Introduction|Introduction]] | |[[ZCS 6.0:Zimlet Developers Guide:Introduction|Introduction]] | ||
Line 15: | Line 20: | ||
|[[ZCS 6.0:Zimlet Developers Guide:Example Zimlets|Example Zimlets]] | |[[ZCS 6.0:Zimlet Developers Guide:Example Zimlets|Example Zimlets]] | ||
|} | |} | ||
== Description == | == Description == | ||
Line 27: | Line 31: | ||
<pre> | <pre> | ||
<zimlet name=" | <zimlet name="com_zimbra_example_customtooltip" version="1.0" description="Demos a custom tool tip"> | ||
<include>com_zimbra_example_customtooltip.js</include> | |||
<handlerObject>com_zimbra_example_customtooltip_HandlerObject</handlerObject> | |||
<contentObject> | |||
<matchOn> | |||
<regex attrs="ig">lab|user|remodel</regex> <!-- matches lab or user or remodel --> | |||
</matchOn> | |||
</contentObject> | |||
</zimlet> | </zimlet> | ||
</pre> | </pre> | ||
Line 43: | Line 47: | ||
<pre> | <pre> | ||
** | /** | ||
* This method is called when the tool tip is popped-up. | * This method is called when the tool tip is popped-up. | ||
* | * | ||
Line 51: | Line 55: | ||
* @param {Object} canvas the canvas | * @param {Object} canvas the canvas | ||
*/ | */ | ||
com_zimbra_example_customtooltip_HandlerObject.prototype.toolTipPoppedUp = | |||
function(spanElement, contentObjText, matchContent, canvas) { | function(spanElement, contentObjText, matchContent, canvas) { | ||
// generate the HTML | |||
var html = new Array(); | |||
var i = 0; | |||
html[i++] = "<table cellpadding=2 cellspacing=0 border=0>"; | |||
html[i++] = ["<tr valign='center'>", "<td><b>CUSTOM TOOL TIP</b></td>", "</tr>"].join(""); | |||
html[i++] = ["<tr valign='center'>", "<td><div style='white-space:nowrap'><b>contentObjText = </b>", contentObjText, "</div>", "</td></tr>"].join(""); | |||
html[i++] = ["<tr valign='center'>", "<td><div style='white-space:nowrap'><b>matchContent[0] = </b>", matchContent[0], "</div>", "</td></tr>"].join(""); | |||
html[i++] = ["<tr valign='center'>", "<td><div style='white-space:nowrap'><b>matchContent.index = </b>", matchContent.index, "</div>", "</td></tr>"].join(""); | |||
html[i++] = ["<tr valign='center'>", "<td><div style='white-space:nowrap'><b>matchContent.input = </b>", matchContent.input, "</div>", "</td></tr>"].join(""); | |||
html[i++] = ["</table>"].join(""); | |||
// write the HTML to the tool tip canvas | |||
canvas.innerHTML = html.join(""); | |||
}; | }; | ||
</pre> | </pre> | ||
Line 73: | Line 78: | ||
{| cellspacing="0" cellpadding="5" border="1" | {| cellspacing="0" cellpadding="5" border="1" | ||
|Zimlet Package | |Zimlet Package | ||
|[ | |[http://files.zimbra.com/docs/zimlet/zcs/6.0/examples/com_zimbra_example_customtooltip/com_zimbra_example_customtooltip.zip com_zimbra_example_customtooltip.zip] | ||
|} | |} | ||
Line 84: | Line 89: | ||
{{Article Footer|Zimbra Collaboration | {{Article Footer|Zimbra Collaboration Server 7.0|01/10/2010}} | ||
[[Category:Developers]] | [[Category:Developers]] | ||
[[Category:Zimlets]] | [[Category:Zimlets]] | ||
[[Category:ZCS 7.0]] | |||
[[Category:ZCS 6.0]] | [[Category:ZCS 6.0]] |
Revision as of 12:30, 13 July 2015
ZCS 6.0: Zimlet Developer Guide:Examples:Custom Toll Tip
- This article is a Work in Progress, and may be unfinished or missing sections.
Introduction | Getting Started | Dev Environment Setup | Developing Zimlets | Advanced Concepts | API Specifications | Example Zimlets |
Description
This zimlet will match the words lab, user or remodel and display a tool tip. The tool tip is generated in the Handler Object when the toolTipPoppedUp()
method is called.
Screen Shot
Definition File
<zimlet name="com_zimbra_example_customtooltip" version="1.0" description="Demos a custom tool tip"> <include>com_zimbra_example_customtooltip.js</include> <handlerObject>com_zimbra_example_customtooltip_HandlerObject</handlerObject> <contentObject> <matchOn> <regex attrs="ig">lab|user|remodel</regex> <!-- matches lab or user or remodel --> </matchOn> </contentObject> </zimlet>
Handler Object
The following code snippet from the Zimlet Handler Object creates the HTML code for the tool tip and writes the HTML to the canvas. The toolTipPoppedUp()
zimlet method is called by the zimlet framework:
/** * This method is called when the tool tip is popped-up. * * @param {Object} spanElement the element * @param {String} contentObjText the content object text * @param {Hash} matchContent the match content (matchContent[0], matchContent.index, matchContent.input) * @param {Object} canvas the canvas */ com_zimbra_example_customtooltip_HandlerObject.prototype.toolTipPoppedUp = function(spanElement, contentObjText, matchContent, canvas) { // generate the HTML var html = new Array(); var i = 0; html[i++] = "<table cellpadding=2 cellspacing=0 border=0>"; html[i++] = ["<tr valign='center'>", "<td><b>CUSTOM TOOL TIP</b></td>", "</tr>"].join(""); html[i++] = ["<tr valign='center'>", "<td><div style='white-space:nowrap'><b>contentObjText = </b>", contentObjText, "</div>", "</td></tr>"].join(""); html[i++] = ["<tr valign='center'>", "<td><div style='white-space:nowrap'><b>matchContent[0] = </b>", matchContent[0], "</div>", "</td></tr>"].join(""); html[i++] = ["<tr valign='center'>", "<td><div style='white-space:nowrap'><b>matchContent.index = </b>", matchContent.index, "</div>", "</td></tr>"].join(""); html[i++] = ["<tr valign='center'>", "<td><div style='white-space:nowrap'><b>matchContent.input = </b>", matchContent.input, "</div>", "</td></tr>"].join(""); html[i++] = ["</table>"].join(""); // write the HTML to the tool tip canvas canvas.innerHTML = html.join(""); };
Download
Zimlet Package | com_zimbra_example_customtooltip.zip |
Useful Links