Flex 4 tooltip实例

最新推荐文章于 2014-08-06 16:11:00 发布

原创最新推荐文章于 2014-08-06 16:11:00 发布 · 967 阅读

0 ·

CC 4.0 BY-SA版权

Flex + FMS 专栏收录该内容

176 篇文章

订阅专栏

本文介绍如何在Flex应用中实现动态显示和隐藏Tooltip，并通过代码实例展示了创建和销毁Tooltip的方法。

<?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" minWidth="955" minHeight="600"
			   creationComplete="application1_creationCompleteHandler(event)">
	
	<fx:Declarations>
		<!-- 将非可视元素（例如服务、值对象）放在此处 -->
		<mx:Rotate id="rotate" />
		<mx:Fade id="fadeIn" alphaFrom="0" alphaTo="1" duration="2000"/> 		
	</fx:Declarations>
	<fx:Script>
		<![CDATA[
			import mx.events.FlexEvent;
			import mx.events.ToolTipEvent;
						
			import spark.events.IndexChangeEvent;
			import mx.managers.ToolTipManager;
			
			import mx.core.UIComponent;
			
			import mx.managers.ToolTipManager;   
			import mx.controls.ToolTip;   
			public var myTip:ToolTip;   
			
						
			protected function application1_creationCompleteHandler(event:FlexEvent):void
			{
				ToolTipManager.showEffect= fadeIn;//rotate;//fadeIn; //显示tooltip的特效 
				ToolTipManager.hideEffect=fadeIn;// rotate;//fadeIn; //隐藏 tooltip的特效 
				
				showMyTooltip(one, "第一步开始");				
			}
			
			private function showMyTooltip(displayObject:UIComponent, tip:String):void{
				var tipX:Number = displayObject.x + displayObject.width + 10;
				var tipY:Number = displayObject.y;
				myTip =  ToolTipManager.createToolTip(tip,tipX,tipY) as ToolTip;
			}
			
			private function hideMyTooltip():void{
				if (myTip) {   
					ToolTipManager.destroyToolTip(myTip);   
					myTip = null; 
				}
			}
			
			protected function button_toolTipShowHandler(event:ToolTipEvent):void
			{
				event.toolTip.x=event.currentTarget.x + event.currentTarget.width + 10;
				event.toolTip.y=event.currentTarget.y + (event.currentTarget.height - event.toolTip.height) / 2;
			}
			
			protected function button1_clickHandler(event:MouseEvent):void
			{
				hideMyTooltip();
				showMyTooltip(two, "第二步开始");
			}
			
			protected function button2_clickHandler(event:MouseEvent):void
			{
				hideMyTooltip();
				showMyTooltip(three, "第三步开始");
			}
			
			protected function button3_clickHandler(event:MouseEvent):void
			{
				hideMyTooltip();
				showMyTooltip(four, "第四步开始");
			}
			
			protected function button4_clickHandler(event:MouseEvent):void
			{
				hideMyTooltip();
			}
			
		]]>
	</fx:Script>
	
	<fx:Style>
		@namespace s "library://ns.adobe.com/flex/spark";
		@namespace mx "library://ns.adobe.com/flex/mx";
		
		mx|ToolTip {
			borderStyle: "errorTipRight";
			borderColor:black;
			backgroundColor: black;
			backgroundAlpha: 0.8;
			cornerRadius: 5;
			color: white;
			fontSize: 16; 
			paddingBottom:5;
			paddingLeft:5;
			paddingRight:5;
			paddingTop:5;
			/* font-family: verdana;*/
			/* borderSkin: ClassReference("MyToolTip"); */
		}
		
	</fx:Style>
	
	<s:VGroup gap="100" >
		<s:Button id="testtooltip" label="测试tooltip" width="100" height="100"  toolTip="测试tooltip [[DYNAMIC]]\2 - 解压缩后为 763,122 个字节 - 解压缩后为 763,122 个字节- 解压缩后为 763,122 个字节" toolTipShow="button_toolTipShowHandler(event)"/>
				
		<s:Button id="one" label="第一步" click="button1_clickHandler(event)" />
		<s:Button id="two" label="第二步" click="button2_clickHandler(event)" />
		<s:Button id="three" label="第三步" click="button3_clickHandler(event)" />
		<s:Button id="four" label="完成" click="button4_clickHandler(event)" />
	</s:VGroup>
	
	
</s:Application>