Posted on 2012-09-20 10:10
TWaver 閱讀(1363)
評論(0) 編輯 收藏
如果您顯示過Tree的ToolTip，會發現這個tooltip離鼠標太遠了；而且也無法跟隨鼠標一起移動；最重要的是，如果想動態更改tooltip也很麻煩。
還是自定義ToolTip靈活：
1. 設置tree.toolTipFunction，關閉默認的tooltip
1 tree.toolTipFunction = function(element:IData):String {
2 return null;
3 }
4
2. 監聽mousemove事件，動態顯示、隱藏以及更新tooltip
1 tree.addEventListener(MouseEvent.MOUSE_MOVE, function(e:MouseEvent):void {
2 handleMouseMove(e);
3 });
4
3. 由于tree.getTreeDataByMouseEvent方法中，即使鼠標在空白處也有返回值，所以需要特殊處理一下，判斷鼠標是否在icon或者text上：
1 private function showToolTip():Boolean {
2 var obj:InteractiveObject = null;
3 var mousePoint:Point = new Point(stage.mouseX, stage.mouseY);
4 var objects:Array = stage.getObjectsUnderPoint(mousePoint);
5 for (var i:int = objects.length-1; i>=0; i--) {
6 if (objects[i] is InteractiveObject) {
7 obj = objects[i] as InteractiveObject;
8 break;
9 } else {
10 if (objects[i] is Shape && (objects[i] as Shape).parent) {
11 obj = (objects[i] as Shape).parent;
12 break;
13 }
14 }
15 }
16 return obj is UIComponent || obj is UITextField;
17 }
效果如下：
完整代碼：
1 <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
2 xmlns:tw="http://www.servasoftware.com/2009/twaver/flex"
3 paddingLeft="0" paddingRight="0" paddingTop="0" paddingBottom="0" backgroundColor="#FFFFFF"
4 creationComplete="init()">
5 <mx:Script>
6 <![CDATA[
7 import mx.core.IToolTip;
8 import mx.core.UIComponent;
9 import mx.core.UITextField;
10 import mx.managers.ToolTipManager;
11
12 import twaver.DataBox;
13 import twaver.IData;
14 import twaver.Link;
15 import twaver.Node;
16 import twaver.controls.TreeData;
17
18 private var _toolTip:IToolTip;
19 private var _lastData:IData = null;
20 private var _timer:uint = 0;
21
22 private function init():void {
23 var box:DataBox = tree.dataBox;
24 tree.toolTipFunction = function(element:IData):String {
25 return null;
26 };
27 tree.addEventListener(MouseEvent.MOUSE_MOVE, function(e:MouseEvent):void {
28 handleMouseMove(e);
29 });
30 tree.callLater2(function():void {
31 tree.expandAll();
32 });
33
34 var from:Node = new Node();
35 from.name = "From";
36 from.toolTip = "From";
37 from.centerLocation = new Point(100, 100);
38 box.add(from);
39 var to:Node = new Node();
40 to.name = "To";
41 to.toolTip = "To";
42 to.centerLocation = new Point(300, 400);
43 box.add(to);
44 var link:Link = new Link(from, to);
45 link.name = "Link";
46 link.toolTip = "Link";
47 box.add(link);
48 }
49
50 private function handleMouseMove(e:MouseEvent):void {
51 var treeData:TreeData = tree.getTreeDataByMouseEvent(e);
52 var data:IData = (showToolTip() && treeData && treeData.data) ? treeData.data : null;
53 if(data != null){
54 var x:Number = tree.mouseX + 10, y:Number = tree.mouseY + 10;
55 if(data != _lastData){
56 if(_toolTip != null){
57 ToolTipManager.destroyToolTip(_toolTip);
58 }
59 _toolTip = ToolTipManager.createToolTip(data.toolTip, x, y);
60 if(_timer){
61 clearTimeout(_timer);
62 }
63 _timer = setTimeout(function():void {
64 _timer = 0;
65 if(_toolTip){
66 _toolTip.text = "test\n" + _toolTip.text;
67 }
68 }, 1000);
69 }else{
70 _toolTip.x = x;
71 _toolTip.y = y;
72 }
73
74 }else{
75 if(_toolTip != null){
76 ToolTipManager.destroyToolTip(_toolTip);
77 }
78 _toolTip = null;
79 }
80 _lastData = data;
81 }
82
83 private function showToolTip():Boolean {
84 var obj:InteractiveObject = null;
85 var mousePoint:Point = new Point(stage.mouseX, stage.mouseY);
86 var objects:Array = stage.getObjectsUnderPoint(mousePoint);
87 for (var i:int = objects.length-1; i>=0; i--) {
88 if (objects[i] is InteractiveObject) {
89 obj = objects[i] as InteractiveObject;
90 break;
91 } else {
92 if (objects[i] is Shape && (objects[i] as Shape).parent) {
93 obj = (objects[i] as Shape).parent;
94 break;
95 }
96 }
97 }
98 return obj is UIComponent || obj is UITextField;
99 }
100 ]]>
101 </mx:Script>
102 <tw:Tree id="tree" width="30%" height="100%"/>
103 </mx:Application>
104 完整代碼見附件：
見原文最下方