`
kooii
  • 浏览: 38538 次
  • 性别: Icon_minigender_1
  • 来自: 杭州
社区版块
存档分类
最新评论

自定义Flex ToolTip 的样式

    博客分类:
  • Flex
阅读更多

 mx|ToolTip
      {
          borderStyle:ClassReference("myBorder");

      }

 

查看ToolTipBorder这个类的updateDisplayList(),可以得知通过设置borderStyle为自定义的Border类,可以继承

ToolTipBorder, 或模仿重写一下.

 

ToolTipBorder的源码
 
override protected function updateDisplayList(w:Number, h:Number):void
	{	
		super.updateDisplayList(w, h);

		var borderStyle:String = getStyle("borderStyle");
		var backgroundColor:uint = getStyle("backgroundColor");
		var backgroundAlpha:Number= getStyle("backgroundAlpha");
		var borderColor:uint = getStyle("borderColor");
		var cornerRadius:Number = getStyle("cornerRadius");

		var g:Graphics = graphics;
		g.clear();
		
		filters = [];
                
                //主要是这里的代码
		switch (borderStyle)
		{
			case "none":
			{
				// Don't draw anything
				break;
			}
			case "errorTipRight":
			{
				// border 
				drawRoundRect(
					11, 0, w - 11, h - 2, 3,
					borderColor, backgroundAlpha); 

				// left pointer 
				g.beginFill(borderColor, backgroundAlpha);
				g.moveTo(11, 7);
				g.lineTo(0, 13);
				g.lineTo(11, 19);
				g.moveTo(11, 7);
				g.endFill();
				
				filters = [ new DropShadowFilter(2, 90, 0, 0.4) ];
				break;
			}
			
			case "errorTipAbove":
			{
				// border 
				drawRoundRect(
					0, 0, w, h - 13, 3,
					borderColor, backgroundAlpha); 

				// bottom pointer 
				g.beginFill(borderColor, backgroundAlpha);
				g.moveTo(9, h - 13);
				g.lineTo(15, h - 2);
				g.lineTo(21, h - 13);
				g.moveTo(9, h - 13);
				g.endFill();

				filters = [ new DropShadowFilter(2, 90, 0, 0.4) ];
				break;
			}

			case "errorTipBelow":
			{
				// border 
				drawRoundRect(
					0, 11, w, h - 13, 3,
					borderColor, backgroundAlpha); 

				// top pointer 
				g.beginFill(borderColor, backgroundAlpha);
				g.moveTo(9, 11);
				g.lineTo(15, 0);
				g.lineTo(21, 11);
				g.moveTo(10, 11);
				g.endFill();
				
				filters = [ new DropShadowFilter(2, 90, 0, 0.4) ];
				break;
			}

			default: //Tooltip
			{
				// face
				drawRoundRect(
					3, 1, w - 6, h - 4, cornerRadius,
					backgroundColor, backgroundAlpha) 
				
				if (!dropShadow)
					dropShadow = new RectangularDropShadow();

				dropShadow.distance = 3;
				dropShadow.angle = 90;
				dropShadow.color = 0;
				dropShadow.alpha = 0.4;

				dropShadow.tlRadius = cornerRadius + 2;
				dropShadow.trRadius = cornerRadius + 2;
				dropShadow.blRadius = cornerRadius + 2;
				dropShadow.brRadius = cornerRadius + 2;

				dropShadow.drawShadow(graphics, 3, 0, w - 6, h - 4);

				break;
			}
		}
	}

 

重写可参考

http://flexonblog.wordpress.com/2008/08/19/design-your-own-tooltipborder-in-flexcustom-tooltipborder-in-flexwith-example/

这里还有个Demo 演示

分享到:
评论

相关推荐

    Flex 自定义ToolTip

    ### Flex自定义ToolTip详解 在Flex开发中,`ToolTip`是一种非常实用的界面元素,用于在用户悬停或聚焦某个控件时显示额外的信息。默认情况下,Flex提供了基本的`ToolTip`功能,但有时为了满足特定的设计需求或者...

    flex tooltip

    通常,Flex Tooltip可以通过MXML或ActionScript进行设置和配置,包括设置显示的内容、延迟时间、样式等。 `.project` 文件是Eclipse IDE的一个项目配置文件,包含了项目的构建路径、JRE系统库、源文件夹等信息,...

    表格单元格自定义ToolTip组件

    3. CSS文件:用于定义自定义ToolTip样式的样式表。 4. 文档:可能包含组件的使用说明和API参考。 通过理解和掌握这个自定义ToolTip组件,开发者可以更自由地设计数据展示,提高数据可读性,同时也能为用户提供更...

    flex ToolTip汇总

    此外,`ToolTip`还可以自定义样式,包括字体、颜色、背景等,通过设置`styleName`属性引用CSS样式表,或者直接在MXML中设置样式属性。 4. **高级特性** - `showDelay`:控制`ToolTip`在鼠标停留后多久显示。 - `...

    FLEX自定义ToolTips

    本教程将深入探讨如何在Flex中创建自定义的Tooltip。 首先,我们需要了解Flex的基本架构。Flex是基于ActionScript 3.0和MXML的开源框架,用于构建富互联网应用程序(RIA)。在Flex中,我们可以利用各种组件,如...

    Felx4 Custom ToolTips

    以下是一些关于自定义Flex4 Tooltip的知识点: 1. **创建自定义Tooltip组件**:首先,我们需要创建一个新的Flex组件,继承自`mx.controls.ToolTip`类,然后重写或扩展其属性和方法以实现自定义功能。 2. **样式...

    as3 鼠标提示类ToolTip

    在提供的`AS3Tooltip`文件中,可能包含了示例代码或自定义扩展,例如自定义的ToolTip类,它可能增加了额外的功能,如动画效果、自定义布局或者更灵活的配置选项。分析这些代码可以帮助你理解如何根据项目需求进一步...

    Using htmlText in a toolTip in flex

    在Flex应用中,将`MyToolTip`组件设置为需要显示工具提示的组件的`toolTip`属性。例如,对于一个数据网格(DataGrid),可以在`UsingDataTipInDataGrid.mxml`文件中,遍历每个单元格,根据数据项设置自定义工具提示...

    flex 鼠标进入显示提示信息

    这可能需要自定义一个Tooltip类,覆盖其默认的行为,以便在鼠标出界时能够正确调整位置。 5. **示例与源码**:提供的`mouse_titleinfo.mxml`和`mouse_titleinfo.swf`文件很可能是包含上述功能的一个示例应用。通过...

    flex组件介绍

    工具提示可以通过设置控件的`toolTip`属性来实现,该属性可以接受字符串或自定义的控件作为值。 #### 基于菜单的控件 基于菜单的控件,如`PopupMenu`和`MenuBar`,用于创建上下文菜单或主菜单。这些控件提供了一种...

    flex通过remote连接后台

    接下来,**CSS嵌入外部字体**是指在Flex项目中使用CSS样式表引用外部字体资源。这样可以使应用程序的视觉效果更加丰富多样,用户界面更加个性化。通过@font-face规则,我们可以定义新的字体家族,并引用本地或网络上...

    flex quick starts

    - **样式定义**:首先定义了一个名为`ToolTip`的样式,用于设置工具提示的字体、大小、样式、颜色以及背景色。 - **面板设置**:创建了一个面板,并为其设置了一个默认的工具提示:“Child components without ...

    Flex 开发技巧集

    3. **设置TabNavigator的标签文本样式**:通过指定`tabStyleName`属性,可以自定义TabNavigator的标签样式,如字体粗细和内边距。 4. **获取屏幕分辨率**:使用`flash.system.Capabilities`类的`screenResolutionX`...

    Web前端技术项目式教程(HTML5+CSS3+Flex+Bootstrap)-教案.zip

    6. 字体和文本:可以自定义字体,如@font-face,以及文本阴影、文本溢出等样式。 【Flex】 Flex布局,全称为Flexible Box,是CSS3的一种布局模型,专为解决复杂多样的网页布局问题而设计。主要特性包括: 1. 主轴和...

    flex ToolTipDataGrid

    6. **事件处理**:`ToolTipDataGrid`提供了相关的事件,如`showTooltip`和`hideTooltip`,开发者可以通过监听这些事件来实现自定义逻辑,比如追踪用户行为或执行其他操作。 在实际开发中,`ToolTipDataGrid`的实现...

    flex 一问一答

    6. 修改Flex组件的样式,你可以创建自定义样式类并将其应用于组件。例如,对于Alert组件,你可以定义`AlertTitle`和`AlertMessage`样式,然后分别赋值给`titleStyleDeclaration`和`messageStyleDeclaration`属性。...

    flex拖拽形成柱状图,点击弹出图片窗口,柱状图用法

    Flex允许我们自定义柱状图的外观和行为。可以通过CSS样式表或直接在MXML代码中设置颜色、边框、渐变等属性。此外,还可以添加提示信息(tooltip)和工具栏来增强用户体验。 6. **响应式设计**: 考虑到不同设备的...

Global site tag (gtag.js) - Google Analytics