自定义tooltip

最新推荐文章于 2023-11-06 16:12:17 发布

sjz168

最新推荐文章于 2023-11-06 16:12:17 发布

阅读量586

点赞数

分类专栏： Flex 文章标签： image object library function import encoding

Flex 专栏收录该内容

125 篇文章

订阅专栏

Main.mxml

<?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"
      xmlns:mx="library://ns.adobe.com/flex/mx"
      width="700" height="600" backgroundColor="#FFFFFF" fontSize="12">

<fx:Declarations>
  <fx:Array id="directionData">
   <fx:Object label="上边"
        value="1"/>
   <fx:Object label="下边"
        value="2"/>
   <fx:Object label="左边"
        value="3"/>
   <fx:Object label="右边"
        value="4"/>
   <fx:Object label="左上角"
        value="5"/>
   <fx:Object label="右上角"
        value="6"/>
   <fx:Object label="左下角"
        value="7"/>
   <fx:Object label="右下角"
        value="8"/>
  </fx:Array>
  <mx:ArrayCollection id="listData">
   <fx:Object label="image-1" desc="image deｓｃｒｉｐｔion-001 image deｓｃｒｉｐｔion-001"
        direction="{box_direction.selectedItem.value}"
        image="@Embed('1.gif')"/>
   <fx:Object label="image-2" desc="image deｓｃｒｉｐｔion-002 image deｓｃｒｉｐｔion-002"
        direction="{box_direction.selectedItem.value}"
        image="@Embed('1.gif')"/>
   <fx:Object label="image-3" desc="image deｓｃｒｉｐｔion-003 image deｓｃｒｉｐｔion-003"
        direction="{box_direction.selectedItem.value}"
        image="@Embed('1.gif')"/>
   <fx:Object label="image-4" desc="image deｓｃｒｉｐｔion-004 image deｓｃｒｉｐｔion-004"
        direction="{box_direction.selectedItem.value}"
        image="@Embed('1.gif')"/>
  </mx:ArrayCollection>
</fx:Declarations>
<mx:ControlBar>
  <mx:Label text="ToolTip显示方向"/>
  <mx:ComboBox id="box_direction" dataProvider="{directionData}"/>
</mx:ControlBar>
<mx:HorizontalList id="list_toolTip" width="90" dataProvider="{listData}" horizontalCenter="0"
        paddingBottom="10" paddingLeft="10" paddingRight="10" paddingTop="10"
        verticalCenter="0">
  <mx:itemRenderer>
   <fx:Component>
    <mx:VBox toolTip=" " toolTipCreate="{CustomToolTip.createToolTip(event, data)}"
       toolTipShow="{CustomToolTip.showToolTip(event, 5, data.direction)}">
     <fx:Script>
      <![CDATA[
       import CustomToolTip;
      ]]>
     </fx:Script>
     <mx:Image width="70" height="80" source="{data.image}"/>
     <mx:Label width="70" fontSize="14" fontWeight="bold" text="{data.label}"
         textAlign="center"/>
    </mx:VBox>
   </fx:Component>
  </mx:itemRenderer>
</mx:HorizontalList>
</s:Application>

CustomToolTip.mxml

<?xml version="1.0" encoding="utf-8"?>
<mx:Canvas xmlns:fx="http://ns.adobe.com/mxml/2009"
     xmlns:s="library://ns.adobe.com/flex/spark"
     xmlns:mx="library://ns.adobe.com/flex/mx" width="268" height="190" backgroundAlpha="0.7"
     borderStyle="solid" cornerRadius="8" fontSize="12"
     implements="mx.core.IToolTip">
<fx:Declarations>
  
</fx:Declarations>
<fx:Script>
  <![CDATA[
   import mx.core.UIComponent;
   import mx.events.ToolTipEvent;
   import mx.core.IToolTip;
   // 仅仅为了实现 mx.core.IToolTip 接口的方法
   public function set text(value:String):void{}
   public function get text():String{return "";}
   static public const TOP:uint = 1;
   static public const BOTTOM:uint = 2;
   static public const LEFT:uint = 3;
   static public const RIGHT:uint = 4;
   static public const TOP_LEFT:uint = 5;
   static public const TOP_RIGHT:uint = 6;
   static public const BOTTOM_LEFT:uint = 7;
   static public const BOTTOM_RIGHT:uint = 8;
   static public function createToolTip(event:ToolTipEvent, data:Object):void              {
    var tip:CustomToolTip = new CustomToolTip;
    tip.data = data;
    event.toolTip = tip;
   }
   /**
    * 显示一个tooltip
    * @param event         触发的对应事件
    * @param offset        tooltip相对于原组件的位移
    * @param direction     tooltip 显示的方向
    * */
   static public function showToolTip(event:ToolTipEvent, offset:Number = 10,
                   direction:uint = BOTTOM_RIGHT):void              {
    var target:UIComponent = event.currentTarget as UIComponent;
    if (target)                  {
     var tip:IToolTip = event.toolTip;
     var p:Point = target.localToGlobal(new Point);
     switch(direction)                      {
      case TOP:
       tip.x = p.x + (target.width - tip.width)/2;
       tip.y = p.y - offset - tip.height;
       break;
      case BOTTOM:
       tip.x = p.x + (target.width - tip.width)/2;
       tip.y = p.y + offset + target.height;
       break;
      case LEFT:
       tip.x = p.x - offset - tip.width;
       tip.y = p.y + (target.height - tip.height)/2;
       break;
      case RIGHT:
       tip.x = p.x + offset + target.width;
       tip.y = p.y + (target.height - tip.height)/2;
       break;
      case TOP_LEFT:
       tip.x = p.x - offset - tip.width;
       tip.y = p.y - offset - tip.height;
       break;
      case TOP_RIGHT:
       tip.x = p.x + offset + target.width;
       tip.y = p.y - offset - tip.height;
       break;
      case BOTTOM_LEFT:
       tip.x = p.x - offset - tip.width;
       tip.y = p.y + offset + target.height;
       break;
      case BOTTOM_RIGHT:
       tip.x = p.x + offset + target.width;
       tip.y = p.y + offset + target.height;
       break;
      default:
       tip.x = p.x + offset + target.width;
       tip.y = p.y + offset + target.height;
       break;                      }
    }
   }
  ]]>
</fx:Script>
<mx:Canvas left="5" right="5" top="5" bottom="5"
      backgroundColor="#FFFFFF" borderStyle="solid"
      cornerRadius="8">
  <mx:Image x="10" y="10" width="110" height="120"
      horizontalAlign="center"
      source="{data.image}"/>
  <mx:Label x="10" y="143" width="110" fontWeight="bold"
      text="{data.label}" textAlign="center"/>
  <mx:Text left="134" right="10" top="10" bottom="10"
     text="{data.desc}"/>
</mx:Canvas>
</mx:Canvas>