Jul 21

接下来的例子演示了Flex中如何利用ToolTipManager类,手动创建Tool Tips。Demo中点击“Create”按钮后,Tooltips会跟随鼠标移动。

让我们先来看一下Demo可以右键View Source或点击这里察看源代码):


下面是完整代码(或点击这里察看):

Download: main.mxml
  1. <?xml version="1.0" encoding="utf-8"?>
  2. <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
  3.         layout="vertical"
  4.         verticalAlign="middle"
  5.         backgroundColor="white"
  6.         creationComplete="init()">
  7.  
  8.     <mx:Script>
  9.         <![CDATA[
  10.             import mx.core.IToolTip;
  11.             import mx.managers.ToolTipManager;
  12.             import flash.events.MouseEvent;
  13.  
  14.             private var tt:IToolTip;
  15.  
  16.             private function init():void {
  17.                 systemManager.addEventListener(MouseEvent.MOUSE_MOVE, onMouseMove);
  18.             }
  19.  
  20.             private function onMouseMove(evt:MouseEvent):void {
  21.                 if (tt) {
  22.                     tt.move(evt.stageX + 10, evt.stageY + 10);
  23.                     evt.updateAfterEvent();
  24.                 }
  25.             }
  26.  
  27.             private function toolTipCreate():void {
  28.                 if (tt) {
  29.                     toolTipDestroy();
  30.                 }
  31.                 tt = ToolTipManager.createToolTip(textInput.text, textInput.x, textInput.y);
  32.             }
  33.  
  34.             private function toolTipDestroy():void {
  35.                 if (tt) {
  36.                     ToolTipManager.destroyToolTip(tt);
  37.                     tt = null;
  38.                 }
  39.             }
  40.         ]]>
  41.     </mx:Script>
  42.  
  43.     <mx:TextInput id="textInput" text="Tool tip text..." />
  44.     <mx:HBox>
  45.         <mx:Button label="create" click="toolTipCreate()" />
  46.         <mx:Button label="destroy" click="toolTipDestroy()" />
  47.     </mx:HBox>
  48.  
  49. </mx:Application>
代码:Peter deHaan 翻译/整理/编译:minidxer

written by Minidxer  |  tags: , ,

Leave a Reply