`

flex设置错误提示ToolTip样式及创建自定义ToolTip

    博客分类:
  • flex
 
阅读更多
1. 直接在样式文件css中设置:

.errorTip
{
    font-size: 12;
}

flex会自动应用errorTip所设置的样式


2. 自定义ToolTip

   1. <?xml version="1.0" encoding="utf-8"?>  
   2. <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" width="400" height="150" horizontalAlign="center" verticalAlign="middle">  
   3.     <mx:Style>  
   4.         global  
   5.         {  
   6.             font-size: 12;  
   7.             theme-color: haloSilver;              
   8.         }  
   9.         Application  
  10.         {  
  11.             background-color: #dddddd;    
  12.         }  
  13.         .errorTip  
  14.         {  
  15.             font-size: 12;  
  16.         }  
  17.         .testTip  
  18.         {  
  19.             font-size: 12;  
  20.             border-color: #ffffdd;  
  21.             color: #ff0000;  
  22.             font-weight: bold;  
  23.         }  
  24.     </mx:Style>  
  25.     <mx:Script>  
  26.         <![CDATA[  
  27.             import mx.managers.ToolTipManager;  
  28.             import mx.controls.ToolTip;  
  29.    
  30.             private var _tip:ToolTip;  
  31.    
  32.             private function _showTip($txt:String):void  
  33.             {  
  34.                 trace(_tip);  
  35.                 if(_tip == null)  
  36.                 {  
  37.                     var __point:Point = new Point(emailTI.x, emailTI.y);  
  38.                     trace(__point)  
  39.                     __point = emailTI.localToGlobal(__point);  
  40.                     trace(__point);  
  41.                      _tip = ToolTipManager.createToolTip(   $txt,  
  42.                                                             __point.x - emailTI.x,   
  43.                                                             __point.y - 40 ,  
  44.                                                             'errorTipAbove') as ToolTip;  
  45.                      _tip.styleName = 'testTip';  
  46.                 }  
  47.             }  
  48.    
  49.             private function _destoryTip():void  
  50.             {  
  51.                 if(_tip)  
  52.                 {  
  53.                     ToolTipManager.destroyToolTip(_tip);  
  54.                 }  
  55.                 _tip = null;  
  56.             }  
  57.         ]]>  
  58.     </mx:Script>  
  59.     <mx:EmailValidator id="emailV" source="{emailTI}" property="text" trigger="{btn}" triggerEvent="click"/>  
  60.     <mx:Form horizontalCenter="0">  
  61.         <mx:FormItem label="电子邮件:" width="100%">  
  62.             <mx:TextInput id='emailTI' width="100%"/>  
  63.         </mx:FormItem>  
  64.         <mx:FormItem horizontalAlign="center" width="100%" direction="horizontal">  
  65.             <mx:Button id="btn" label="提交"/>  
  66.             <mx:Button id='btn2' label="显示Tip" click="_showTip('测试弹出 Tip')"/>  
  67.             <mx:Button id='btn3' label="取消Tip" click="_destoryTip()"/>  
  68.         </mx:FormItem>          
  69.     </mx:Form>  
  70. </mx:Application
 
分享到:
评论

相关推荐

    表格单元格自定义ToolTip组件

    5. 应用到DataGrid:在DataGrid的列定义或单元格渲染器中,设置自定义ToolTip组件为指定的ToolTip。 在实际项目中,"自定义ToolTip"这个压缩包可能包含以下内容: 1. 源代码文件:自定义ToolTip组件的ActionScript...

    Flex 自定义ToolTip

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

    flex tooltip

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

    flex ToolTip汇总

    在IT行业中,`flex`是一种用于创建富互联网应用程序(RIA)的开源框架,它主要由Adobe Systems开发。本文将深入探讨“flex ToolTip”的概念、使用方法和常见应用,这在网页和桌面应用的交互设计中起着重要作用。 `...

    as3 鼠标提示类ToolTip

    在AS3中,我们可以直接通过创建ToolTip对象并设置其text属性来创建一个简单的提示: ```actionscript var toolTip:ToolTip = new ToolTip(); toolTip.text = "这是一个提示信息"; ``` 然后,我们需要将这个提示与...

    FLEX自定义ToolTips

    在Flex编程中,Tooltip是用户界面中一个...通过以上步骤,我们便能创建出拥有炫酷特效的自定义Tooltip,提高Flex应用的交互性和用户体验。记得在开发过程中,始终关注性能和可维护性,避免过度设计,使代码简洁高效。

    flex 鼠标进入显示提示信息

    在Flex中,我们可以使用组件库中的Tooltip类来创建提示信息。Tooltip类允许我们在用户将鼠标悬停在某个组件上时显示文本信息。 创建提示信息的基本步骤如下: 1. **创建组件**:首先,你需要有一个用户可交互的...

    Using htmlText in a toolTip in flex

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

    Felx4 Custom ToolTips

    1. **创建自定义Tooltip组件**:首先,我们需要创建一个新的Flex组件,继承自`mx.controls.ToolTip`类,然后重写或扩展其属性和方法以实现自定义功能。 2. **样式定制**:使用Flex的CSS样式表来改变Tooltip的外观,...

    flex quick starts

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

    flex通过remote连接后台

    Flex中的Tooltip类可以方便地创建和定制这些提示信息,以帮助用户更好地理解界面元素的功能。 在提供的文件“AmazonWindowDemo”中,我们可以推测这是一个示例应用,演示了如何运用以上技术,如通过RemoteObject...

    flex组件介绍

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

    flex ToolTipDataGrid

    1. **创建自定义组件**:首先,我们需要创建一个继承自`DataGrid`的自定义组件,并重写其中的相关方法,如`updateDisplayList()`,在此处添加提示逻辑。 2. **计算提示位置**:根据鼠标的当前位置和单元格尺寸,...

    flex英文帮助文档(非常详细)

    - **自定义 Spark Item Renderer**:介绍了如何创建自定义的 Item Renderer 来个性化列表项的显示方式。 - **Spark 基于列表的控件**:涵盖了 Flex 中基于列表的各种控件的特性和使用方法。 - **Spark DataGrid 和 ...

    Flex 开发技巧集

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

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

    此外,还可以添加提示信息(tooltip)和工具栏来增强用户体验。 6. **响应式设计**: 考虑到不同设备的屏幕尺寸,确保柱状图在不同分辨率下都能正确显示。可以使用Flex的布局管理器和响应式设计原则来实现这一点。...

    flex 一问一答

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

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

    3. JavaScript插件:如carousel(轮播图)、collapse(折叠)和tooltip(提示)等,增强交互性。 4. 可定制性:通过Sass和Less预处理器,轻松调整主题和样式。 5. 响应式设计:内置的媒体查询确保在各种设备上都有...

Global site tag (gtag.js) - Google Analytics