直接显示ToolTip和errorTip（不需要将鼠标移到组件上）

作者: 日期: 2008-05-25 发表评论 (5) 查看评论

本站原创文章，转载请注明： 转载自zrong's Blog，原文 直接显示ToolTip和errorTip（不需要将鼠标移到组件上），欢迎使用文章源码进行转载。

本站转载文章会标明[转]，转载请注明原始作者文章地址。


在使用mx.validator包的时候，我一直都希望检测没有通过的错误信息能够直接显示出来，而不是等我把鼠标移动到没有通过的组件上再显示。我认为这能带给用户更好的体验。因为用户能在第一时间就知道自己到底填错了什么，况且，并不是所有的用户都知道必须把鼠标移动到出错的组件上才能看到错误信息的。很多用户在控件的边框变红，并且不能够继续提交之后不知所措。（我认为，那个红色并不明显，还不至于让用户知道必须把鼠标移动到组件上去，尤其是在页面中的组件相当多的时候……）

今天翻看Flex 3的帮助，找到了解决的办法。关键在于ToolTipManager类的使用。使用ToolTipManager类的createToolTip方法可以直接生成一个ToolTip进行显示。语法很简单，只需要指定要显示的文字，x、y值即可。如果坐标值是基于组件的，则需要使用localToGlobal来转换坐标系。
一个有趣的地方是ToolTip的箭头方向。createToolTip的第4个参数是指定箭头。如果为空，就不显示箭头。如果为下面三个字符串值中的一个，则会显示箭头：

  • errorTipAbove
  • errorTipRight
  • errotTipBelow

是的，没有errorTipLeft。

另一个有趣的地方是关于ToolTip的样式。对于createToolTip生成的ToolTip，可以用ToolTip选择符控制它的样式。但是这还取决于createToolTip的第4个参数。如果这个参数有值，那么就必须使用.errorTip这个css类来控制它的样式了。

?View Code CSS
1
2
3
4

.errorTip
{
	font-size: 12;
}

.errorTip会影响Validator的样式，所以，可以重新定义专有样式，并在生成toolTip的时候赋值给它。

?View Code CSS
1
2
3
4
5
6
7
8

.testTip
{
	font-size: 12;
	border-color: #ffffdd;
	color: #ff0000;
	font-weight: bold;
}
_tip.styleName = 'testTip';

createToolTip生成的ToolTip，必须用destoryToolTip来清除。如果在清楚之前再次调用createToolTip，则会生成重复的ToolTip。ToolTipManager有一个currentToolTip属性来保存当前显示的ToolTip，但这个属性对于使用createToolTip创建的ToolTip并没有效果。因此还是老老实实的在生成的时候用变量把它保存下来把。

源码：

?View Code XML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70

<?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>

范例效果：

关联文章

  1. 伯汉网络不要脸
  2. [转]中国惠普前总裁孙振耀谈工作与生活
  3. 利用数组公式进行多条件计数
  4. 《ActionScript 3.0 Cookbook》读书笔记1.1
  5. 几个CSS弹出菜单源码
技术, ,
发表评论？

5 条评论。

  1. penpen 2008-12-26 在 16:25

    给你一个好方法。既然是mouse over事件触发，目标组件的change事件里可以伪造一个mouse over事件，这样就能方便的用validator组件了

  2. 老张 2009-09-3 在 19:08

    有没有办法只要是错误的输入就一直显示错误在默认的位置啊？除非用户修改到正确的输入才取消，我是新手刚学FLEX3希望能交个朋友我的QQ是5434270

  3. zrong 2009-09-3 在 20:14

    研究下ToolTip的源码好了

  4. Woo 2009-12-30 在 13:19

    1楼的方法不错，简单又能解决问题

  5. 匿名 2010-02-11 在 12:06

    信春哥，不挂科.

发表评论

验证图片

请输入上面的验证码