`

使用ToolTipManager自定义tooltip

    博客分类:
  • flex
阅读更多

直接贴代码,一看就懂。

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" width="400" height="150" horizontalAlign="center" verticalAlign="middle">
	<mx:Style>
		global
		{
			font-size: 12;
			theme-color: haloSilver;			
		}
		Application
		{
			background-color: #dddddd;	
		}
		.errorTip
		{
			font-size: 12;
		}
		.testTip
		{
			font-size: 12;
			border-color: #ffffdd;
			color: #ff0000;
			font-weight: bold;
		}
	</mx:Style>
	<mx:Script>
		<![CDATA[
			import mx.managers.ToolTipManager;
			import mx.controls.ToolTip;
 
			private var _tip:ToolTip;
 
			private function _showTip($txt:String):void
			{
				trace(_tip);
				if(_tip == null)
				{
					var __point:Point = new Point(emailTI.x, emailTI.y);
					trace(__point)
					__point = emailTI.localToGlobal(__point);
					trace(__point);
					 _tip = ToolTipManager.createToolTip(	$txt,
					 										__point.x - emailTI.x, 
					 										__point.y - 40 ,
					 										'errorTipAbove') as ToolTip;
					 _tip.styleName = 'testTip';
				}
			}
 
			private function _destoryTip():void
			{
				if(_tip)
				{
					ToolTipManager.destroyToolTip(_tip);
				}
				_tip = null;
			}
		]]>
	</mx:Script>
	<mx:EmailValidator id="emailV" source="{emailTI}" property="text" trigger="{btn}" triggerEvent="click"/>
	<mx:Form horizontalCenter="0">
		<mx:FormItem label="电子邮件:" width="100%">
			<mx:TextInput id='emailTI' width="100%"/>
		</mx:FormItem>
		<mx:FormItem horizontalAlign="center" width="100%" direction="horizontal">
			<mx:Button id="btn" label="提交"/>
			<mx:Button id='btn2' label="显示Tip" click="_showTip('测试弹出Tip')"/>
			<mx:Button id='btn3' label="取消Tip" click="_destoryTip()"/>
		</mx:FormItem>		
	</mx:Form>
</mx:Application> 

 

范例效果:

 

tips:

1.createToolTip生成的ToolTip,必须用destoryToolTip来清除。如果在清楚之前再次调用createToolTip,则会生成重复的ToolTip。ToolTipManager有一个currentToolTip属性来保存当前显示的ToolTip,但这个属性对于使用createToolTip创建的ToolTip并没有效果

2.

createToolTip的第4个参数是指定箭头。如果为空,就不显示箭头。如果为下面三个字符串值中的一个,则会显示箭头:

  • errorTipAbove
  • errorTipRight
  • errotTipBelow

摘自:http://zengrong.net/post/455.htm

分享到:
评论

相关推荐

Global site tag (gtag.js) - Google Analytics