`
JavaCrazyer
  • 浏览: 3008752 次
  • 性别: Icon_minigender_1
  • 来自: 河南
社区版块
存档分类

Flex4之为ToolTip设置旋转特效及字体

阅读更多

没想到ToolTip一个提示标签也可以加上动画,看来Flex真是无所不能啊

<?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" creationComplete="init()" minWidth="955" minHeight="600">
	<fx:Declarations>
		<!-- 将非可视元素(例如服务、值对象)放在此处 -->
		<mx:Rotate id="rotate" /> 
		<mx:Zoom id="zoom" /> 
	</fx:Declarations>
	<fx:Style>
		@namespace s "library://ns.adobe.com/flex/spark";
		@namespace mx "library://ns.adobe.com/flex/mx";
		mx|ToolTip{
		 fontSize:20;
		}
	</fx:Style>
	<fx:Script>
		<![CDATA[
			import mx.managers.ToolTipManager; 
			
			private function init():void { 
				ToolTipManager.hideDelay = 2000; 
				ToolTipManager.showEffect = rotate; 
				ToolTipManager.hideEffect = zoom; 
			} 

		]]>
	</fx:Script>
	
	<mx:Button label="鼠标移到我身上"   toolTip="旋转的tooltip" /> 
</s:Application>

关于字体样式设计还可以这样写,在初始化方法中调用,记住如果是在fx:style中设置,那么要加上命名空间,如果是写代码形式的则要加上对应类名的全限定名

StyleManager.getStyleDeclaration("mx.controls.ToolTip").setStyle("fontStyle","italic");
StyleManager.getStyleDeclaration("mx.controls.ToolTip").setStyle("fontSize","20");
StyleManager.getStyleDeclaration("mx.controls.ToolTip").setStyle("fontFamily","Arial");
StyleManager.getStyleDeclaration("mx.controls.ToolTip").setStyle("color","blue");
StyleManager.getStyleDeclaration("mx.controls.ToolTip").setStyle("backgroundColor","#33CC99");

 

 

赶紧将代码贴过去吧,看看特效

分享到:
评论

相关推荐

    flex tooltip

    标题中的“flex tooltip”指的是Adobe Flex中的一种交互设计元素,Tooltip。在Flex应用程序开发中,Tooltip是用来显示鼠标悬停在某个组件上时提供额外信息的小型弹出窗口。它可以帮助用户理解控件的功能或者显示一些...

    HTML5 SVG弹性Tooltip提示框特效.zip

    Tooltip通常用于在鼠标悬停时显示额外信息,而这里的特效则为Tooltip赋予了动态和视觉吸引力。通过使用SVG,开发者可以精确控制图形的形状和尺寸,使得Tooltip在展开和收缩时呈现出平滑的动画效果。 Anime.js是一个...

    Flex 自定义ToolTip

    下面,我们将深入探讨如何在Flex中实现自定义`ToolTip`,并以给定的源代码为例进行解析。 #### 主要知识点: 1. **Flex中的`ToolTip`概念与用途** 2. **如何创建自定义`ToolTip`** 3. **理解`Main.mxml`文件结构与...

    HTML5鼠标悬停弹性动画Tooltip提示框特效

    然后,在`:hover`伪类下,我们设置了`opacity`和`transform`属性,使得在鼠标悬停时,Tooltip会从底部弹出,并通过`transform`平滑地向上移动。 最后,`js`文件可能用于更复杂的交互逻辑,例如动态生成Tooltip或者...

    CSS3带Tooltip的按钮特效.zip

    通常,按钮和Tooltip会被设置为相对定位,而Tooltip子元素会设置为绝对定位,以便根据鼠标位置调整。 5. **盒模型和布局**:理解CSS3的盒模型(包括内边距、外边距和边框)对于精确控制Tooltip的大小和位置至关重要...

    表格单元格自定义ToolTip组件

    在标准的DataGrid组件中,ToolTip通常默认为简单的文字提示,但往往无法满足复杂的业务需求或设计要求。自定义ToolTip组件则可以打破这些限制,允许开发者自定义提示内容、样式、位置、动画效果等,从而提升用户体验...

    Flex_特效之鱼眼特效

    4. **动态提示**:描述中提到的“冒泡提示”可能是使用Tooltip或自定义组件实现的。当鼠标悬停在特定位置时,一个包含信息的气泡会出现在鼠标附近,显示相关的文字或数据。 5. **性能优化**:由于鱼眼特效需要实时...

    HTML5鼠标悬停弹性动画Tooltip提示框特效.zip

    在本例中,标题可能被设置为与特效相关的描述性文字,如“弹性Tooltip动画”。 描述中提到的“非常实用的特效代码”,可能指的是使用HTML5的`&lt;div&gt;`或者其他元素配合CSS3的属性来创建的。CSS3提供了许多新的选择器...

    Extjs4添加tooltip

    Extjs4的textfield控件竟然没有tooltip悬浮提示,这应该算是个bug吧。网上查了很多,也没有方案。后来自己通过查询并整理出这个方案,终于实现了。 思想如下: 在textfield渲染时注册mouseover事件,然后在其中调用...

    flex ToolTip汇总

    首先,你需要在MXML代码中定义一个`ToolTip`实例,并为其设置相应的属性,如`id`、`content`(显示的文本)和`delay`(显示`ToolTip`前的延迟时间)。 2. **关联ToolTip与组件** 将`ToolTip`与UI组件关联通常通过`...

    Tooltip

    4. **样式和布局**:Tooltip的外观可以通过设置字体、颜色、背景色、边框等属性进行定制。开发者可能提供了一些预设的样式,或者允许用户自定义。 5. **示例或测试代码**:压缩包可能包含一些示例代码,展示了如何...

    WPF修改Tooltip样式

    在Windows Presentation Foundation (WPF) 中,Tooltip是一个用于显示与鼠标指针相关的简短提示信息的控件。它通常在用户将鼠标悬停在其他UI元素上时出现,提供额外的信息。在默认情况下,Tooltip的样式是有限的,但...

    echarts的axisLabel添加tooltip功能

    4. **完善交互**:最后,为了让`tooltip`跟随鼠标移动,可以设置`tooltip`的`trigger`为`axis`,并调整`tooltip`的`position`选项,使其相对于鼠标位置显示。 ```javascript tooltip: { // ... position: ...

    3D地球+自定义tooltip,自定义样式完美显示

    4. 配置tooltip,设置其为自定义模式,并指定自定义的样式和内容模板。 5. 使用CSS定义tooltip的样式,包括定位、过渡动画等,确保其在页面中的位置和视觉效果符合预期。 6. 将数据绑定到地球模型上,当鼠标悬停时,...

    DuiLib 自绘鼠标提示窗口 tooltip

    4. **动画效果**:为了提升用户体验,自定义的tooltip可能会添加一些动态效果,如淡入淡出、平滑移动等。这需要开发者了解DuiLib的动画框架,并能编写相应的动画代码。 5. **内存管理和性能优化**:自绘tooltip可能...

Global site tag (gtag.js) - Google Analytics