现在的位置: 首页 > 综合 > 正文

自定义ToolTip组件

2013年08月16日 ⁄ 综合 ⁄ 共 1605字 ⁄ 字号 评论关闭

Flex自带的ToolTip是一个矩形框加上一个文本框,可以通过修改style设置他的大小,背景,字体颜色等,但不能改变其形状,如果想要一个五角星之类的ToolTip就得自定义了。下面简单介绍一下自定义ToolTip的方法,其实做法跟自定义其他组件一样,因为ToolTip本身就是一个组件,只需要实现IToolTip接口

首先创建一个名为MyToolTip的组件:
<?xml version="1.0" encoding="utf-8"?>
<mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml "
    implements="mx.core.IToolTip"
 width="500" height="100%" backgroundColor="#ffd7ff" borderStyle="solid" cornerRadius="5">
 <mx:Script>
  <![CDATA[
   [Bindable]
   private var _text:String;
  
   public function get text():String
   {
    return this._text;
   }
  
   public function set text(value:String):void
   {
    this._text = value;
   }
  ]]>
 </mx:Script>
 <mx:Text width="498" text="{this._text}" color="#FFFFFF" fontSize="14" textAlign="left"/>
</mx:Canvas>

然后在程序中使用这个ToolTip,使用方法是在要显示ToolTip的组件里监听 toolTipCreate 事件,这个事件是在创建ToolTip前调用的,因此你可以在这里创建自定义的ToolTip,如果要对这个ToolTip的位置定位,可以监听他的toolTipShow事件,这个事件是在要显示toolTip时调用的

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml " verticalAlign="middle">
 <mx:Script>
  <![CDATA[
   import mx.events.ToolTipEvent;
   private function createToolTip(e:ToolTipEvent):void
   {
    var tip:MyToolTip = new MyToolTip();
    e.toolTip = tip;
   }

   //ToolTip定位
   private function positionToolTip(e:ToolTipEvent):void  
  {
    //将ToolTip定位在距离该组件上方(5,5)的位置
    //var pt:Point = new Point();
    //pt.x = 0;
    //pt.y = 0;  
    //pt = btn.localToGlobal(pt);
    //e.toolTip.x = pt.x + 5;
    //e.toolTip.y = pt.y - 35;

    //将ToolTip定位在距离当前鼠标下方(10,20)的位置
    e.toolTip.x = mouseX + 10;
    e.toolTip.y = mouseY + 20;
   }
  ]]>
 </mx:Script>
 <mx:Button id="btn" label="testToolTip" toolTip="test"
  toolTipCreate ="createToolTip(event)" toolTipShow="positionToolTip(event)"/>
</mx:Application>

抱歉!评论已关闭.