Flex4 - 使用自定义ToolTip组件替换系统默认的ToolTip
作者:hangge | 2015-04-08 09:19
Flex中,如果给组件设置了toolTip属性值,则当鼠标移动到该组件上时,会自动出现tip提示,默认样式是黄色背景,且只能显示普通文本。

我们可以继承系统的ToolTip来实现自己的toolTip组件替换,并实现如下功能:
1,提示文本可以使用html文本(同时可以显示图片)
2,提示背景使用自定义皮肤(渐变,边框,半透明背景)
效果图如下:

--- 自定义提示组件 HtmlToolTip.as ---
package {
import mx.controls.ToolTip;
public class HtmlToolTip extends ToolTip
{
override protected function commitProperties():void{
super.commitProperties();
//转化为HTML文本
textField.htmlText = text;
}
override protected function createChildren():void{
//设置边框样式
this.setStyle("borderSkin",HtmlToolBorder);
this.setStyle("backgroundColors",[0x006699, 0xAEB4E6]);
this.setStyle("borderColor",0x5965CC);
super.createChildren();
}
}
}
--- 提示组件皮肤 HtmlToolBorder.as ---
package
{
import flash.display.GradientType;
import mx.skins.halo.ToolTipBorder;
//ToolTipBorder是默认的边框样式
public class HtmlToolBorder extends ToolTipBorder{
override protected function updateDisplayList(unscaledWidth:Number,
unscaledHeight:Number):void{
var borderThickness:Number = this.getStyle("borderThickness");
var borderColor:Number = this.getStyle("borderColor");
var backgroundColors:Array = this.getStyle("backgroundColors");
var backgroundAlpha:Number = this.getStyle("backgroundAlpha");
super.updateDisplayList(unscaledWidth, unscaledHeight);
var w:Number = this.width;
var h:Number = this.height;
//清除原背景图形
this.graphics.clear();
//用渐变绘制背景
this.graphics.beginGradientFill(GradientType.LINEAR,backgroundColors,[1.0,0.5],[0,255]);
//绘制矩形
this.graphics.drawRect(0,0,w,h);
this.graphics.endFill();
this.alpha = backgroundAlpha;
//绘制边框
this.graphics.lineStyle(borderThickness,borderColor,1);
this.graphics.moveTo(0,0);
this.graphics.lineTo(w,0);
this.graphics.lineTo(w,h);
this.graphics.lineTo(0,h);
this.graphics.lineTo(0,0);
}
}
}
--- 使用 ---
<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
creationComplete="init(event)">
<fx:Script>
<![CDATA[
import mx.events.FlexEvent;
import mx.managers.ToolTipManager;
protected function init(event:FlexEvent):void
{
ToolTipManager.toolTipClass = HtmlToolTip;
btn.toolTip ="<b>HtmlText</b><br/><img src='img.png'/>" +
"<br/><br/><br/><br/><br/><br/><br/>Go to: <u>http://hangge.com</u>";
}
]]>
</fx:Script>
<s:layout>
<s:VerticalLayout paddingLeft="20" paddingTop="20"/>
</s:layout>
<s:Button id="btn" label="自定义ToolTip组件"/>
</s:Application>
全部评论(0)