`
menglinxi
  • 浏览: 20517 次
  • 性别: Icon_minigender_1
  • 来自: 广州
文章分类
社区版块
存档分类
最新评论

flex toolpic 样式控制

阅读更多
ToolTips 简介
ToolTips 是很多桌面程序的一个标准特征。当用户在这些组件元素的上方移动的时候所显示的信息将使得这个应用程序更容易被用户所接受和使用。以下这张图片显示了当用户移动鼠标到按钮上所显示的ToolTip文字信息。


当用户把鼠标指针移开这些组件或者点击这些组件的时候,ToolTip的显示信息都会消失。加入鼠标指针仍然提留在这些组件上,Tooltip最终也会消失。默认的行为设置是只显示一次ToolTip内容。

你可以设置当鼠标指针移到组件上到显示Tooltip内容信息的时间。同时你还可以设置ToolTip消失的时间。

假如你在一个容器中定义了一个ToolTip,ToolTipManager将显示父(parent’s)的ToolTip假如其子没有设置ToolTip.

创建ToolTips
每一个可视化的Flex组件都继承了UIComponent类(它实现了IToolTipManagerClient接口)来支持toolTip属性。这个属性从UIComponent类继承而来。你设置了toolTip的属性为一个文本内容,当鼠标移动到该组件上方的时候,这些文字信息就会被显示。以下就是一个设置了按钮的toolTip属性的例子:

<?xml version="1.0"?>

<!-- tooltips/BasicToolTip.mxml -->

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">

<mx:Button id="b1" label="Click Me" toolTip="This Button does nothing."/>

</mx:Application>

你也可以在ActionScript中来设置toolTip性质。比如以下就是创建一个button来设置按钮toolTip属性的例子。

你也可以在ActionScript中来设置toolTip性质。比如以下就是创建一个button来设置按钮toolTip属性的例子。

<?xml version="1.0"?>

<!-- tooltips/BasicToolTipActionScript.mxml -->

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">

<mx:Script><![CDATA[

public function createNewButton(event:MouseEvent):void {

var myButton:Button = new Button();

myButton.label = "Create Another Button";

myButton.toolTip = "Click this new button to create another button.";

myButton.addEventListener(MouseEvent.CLICK, createNewButton);

addChild(myButton);

}

]]></mx:Script>

<mx:Button id="b1" label="Create Another Button" click="createNewButton(event);"/>

</mx:Application>

假如你没有在一个容器的子(child)中定义ToolTip, ToolTipManager将显示它父(parenet)的ToolTip。举个例子,比如你添加了一个button到一个Panel容器中,而这个容器包行了一个ToolTip,当鼠标移动到这个Panel时用户将看到这个Panel 容器的ToolTip内容。当用户移动鼠标指针到这个button控件时候,Panel容器的ToolTip将继续显示。当然你可以通过设置子(child)的ToolTip的属性值来重写容器的ToolTip 内容。以下就是一个关于这方面继承的例子:

<?xml version="1.0"?>

<!-- tooltips/ToolTipInheritance.mxml -->

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">

<mx:VBox toolTip="VBOX">

<mx:Button id="b1" label="Button 1" toolTip="BUTTON"/>

<mx:Button id="b2" label="Button 2"/>

</mx:VBox>

</mx:Application>

        当鼠标移动到button b1的时候,显示BUTTON,而当指针移动到button b2的时候,则显示VBOX.

TabNavigator容器却在它的子(children)上使用ToolTip。假如你添加ToolTip到TabNavigator的一个子版面中,当鼠标移动到那个版面的tab的上方的时候,ToolTip将被显示出来,而不是鼠标移动到那个版面本身上的时候显示ToolTip信息。假如你添加了ToolTip到TabNavigator容器中,除非ToolTip在那个版面被重写否则不可能当鼠标移动到tab或者版面上都显示ToolTip信息。同样在以下的控件中也是类似的效果。

Ø       Accordion

Ø       ButtonBar

Ø       LinkBar

Ø       TabBar

Ø       ToggleButtonBar

虽然很长的信息提示阅读起来不是很方便,但是ToolTip信息的长度没有收到限制。当显示的信息超过了ToolTip设置的长度,文本信息就会被显示在下一行。你可以在ToolTip文本中添加(line breaks),在ActionScript中,你可以使用\n换行符;在MXML中,你可以使用&#13来控制换行的操作。以下就是一个使用上述的两个方法的来控制换行的例子:

<?xml version="1.0"?>

<!-- tooltips/ToolTipNewlines.mxml -->

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"

initialize="doSomething(event)">

<mx:Script><![CDATA[

public function doSomething(event:Event):void {

// Use the \n to force a line break in ActionScript.

b1.toolTip = "Click this button \n to clear the form.";

}

]]></mx:Script>

<mx:Button id="b1" label="Clear" width="100"/>

<!-- Use &#13; to force a line break in MXML tags. -->

<mx:Button id="b2" label="Submit" width="100" toolTip="Click this button &#13; to submit

the form."/>

</mx:Application>

在ToolTip内容的设置上有很多弹性的。你可以通过运用styles(CSS)来改变你程序中的ToolTips. 将下来介绍如何设置ToolTip文本和外框(box)的styles.

设置ToolTip风格
  你可以通过CSS语法或者mx.style.StyleManager类来改变ToolTip的内容和外框(Box)的显示风格。默认的风格设置定义在framework.swc文件中的default.css的文件中。你可以利用类型选择器中的<mx:Style>标签来重写默认的风格。以下就是关于利用CSS语法来改写ToolTip风格的例子:

<?xml version="1.0"?>

<!-- tooltips/ToolTipStyles.mxml -->

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">

<mx:Style>

ToolTip {

fontFamily: "Arial";

fontSize: 19;

fontStyle: "italic";

color: #FF6699;

backgroundColor: #33CC99;

}

</mx:Style>

<mx:Button id="b1" label="Click Me" toolTip="This Button does nothing."/>

</mx:Application>

要使用StyleManager类来设置ToolTip风格,要使用setStyle()这个函数,比如:

<?xml version="1.0"?>

<!-- tooltips/ToolTipStyleManager.mxml -->

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"

creationComplete="setToolTipStyle()">

<mx:Script><![CDATA[

import mx.styles.StyleManager;

private function setToolTipStyle():void {

StyleManager.getStyleDeclaration("ToolTip").setStyle("fontStyle","italic");

StyleManager.getStyleDeclaration("ToolTip").setStyle("fontSize","19");

StyleManager.getStyleDeclaration("ToolTip").setStyle("fontFamily","Arial");

StyleManager.getStyleDeclaration("ToolTip").setStyle("color","#FF6699");

StyleManager.getStyleDeclaration("ToolTip").setStyle("backgroundColor","#33CC99");

}

]]></mx:Script>

<mx:Button id="b1" label="Click Me" toolTip="This Button does nothing."/>

</mx:Application>

     ToolTip使用可继承的全局的styles。比如你通过StyleManager在全局的选择器上(global selector)设置了ToolTip的fontWeight属性:

<?xml version="1.0"?>

<!-- tooltips/ToolTipGlobalStyles.mxml -->

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"

creationComplete="setToolTipStyle()">

<mx:Script><![CDATA[

import mx.styles.StyleManager;

private function setToolTipStyle():void {

StyleManager.getStyleDeclaration("global").setStyle("fontWeight","bold");

}

]]></mx:Script>

<mx:Button id="b1" label="Click Me" toolTip="This Button does nothing."/>

</mx:Application>

         设置在Application object上的style可以运用在所有的UI对象中,但是,ToolTip并没有继承设置在Application Object上的风格设置。所以小心使用global selector.

分享到:
评论

相关推荐

    flex移动布局,极简公共样式包,附demo

    这个“flex移动布局,极简公共样式包”正是为了方便开发者快速构建适应不同屏幕尺寸的移动端应用而设计的。让我们深入探讨Flex布局的原理、优势以及如何利用这个公共样式包来提升开发效率。 1. **Flex布局简介** ...

    flex特效 不错的flex样式生成器

    这个“flex特效 不错的flex样式生成器”是一个工具,可以帮助开发者更轻松地生成适用于Flex布局的CSS样式。通过图形化的界面,用户可以直观地调整各种属性,以实现所需的布局效果。 首先,让我们深入理解Flex布局的...

    Flex样式生成工具(定制各种Flex按钮网页css样式)

    Flex样式生成工具是一款专为网页界面开发者设计的强大辅助软件,它可以帮助用户轻松定制各种Flex按钮的CSS样式。这款工具提供可视化的操作界面,使得复杂的样式调整变得直观且简单,极大地提高了开发效率。 Flex是...

    FLEX界面样式表工具

    标题中的"FLEX界面样式表工具"指的是用于设计和管理Adobe Flex应用中用户界面样式的工具。Flex是一种基于ActionScript和MXML的开源框架,主要用于构建富互联网应用程序(RIA)。这些工具帮助开发者通过图形化的方式...

    Flex3样式设计工具4IN1Flex3样式设计工具4in1.rar

    这个"Flex3样式设计工具4in1.rar"是一个压缩包,包含了多个与Flex3样式设计相关的工具和资源,帮助开发者更有效地管理及定制应用的外观。 1. **Flex3 Component Explorer**:这是一个组件浏览器,允许开发者查看和...

    应用flash制作flex样式

    在本教程中,我们将深入探讨如何利用Flash来设计和实现Flex样式的全面理解。 首先,让我们了解Flex CSS(皮肤和样式)。Flex CSS,也称为MXML CSS,是一种用于定义Flex组件外观的语言。它允许开发者通过CSS样式来...

    传感技术中的基于FlexTest 加载控制系统的外接式位移传感器实时控制加载技术

    尤其是对某些特殊考核部位和对运动过程中试件的加载,在考虑到其加载变形和自身运动的情况下单纯的用力控和位控作动筒达不到加载要求,为了解决该类问题,提出基于FlexTest 加载控制系统的外接式位移传感器实时控制...

    flex样式设计器

    在本“Flex样式设计器”中,我们可以方便地对元素进行布局设计,实现灵活多变的界面效果。 1. **Flex容器(Container)**:Flex布局中的主体是Flex容器,它可以包含一个或多个Flex项目。容器通过设置`display`属性...

    Flex样式范例网站

    Flex样式,全称为Flexible Box,是CSS3中的一种布局模式,设计目的是为了处理复杂的网页布局问题,特别是当需要处理不同屏幕尺寸和设备时。在"Flex样式范例网站"中,我们可以期待看到一系列关于如何使用Flexbox进行...

    Flex\Flex关于样式专题

    3. **CSS语法**:Flex样式系统基于CSS,因此理解基本的CSS语法至关重要。包括选择器、属性和值,以及规则集的组织方式。例如,`.myButton { color: #FF0000; font-size: 14px; }`。 4. **MXML样式**:除了使用CSS,...

    Flex样式生成工具

    Flex样式生成工具是一种专为Adobe Flex应用程序设计的实用工具,旨在简化和优化用户界面的样式定制过程。Flex是一个开源框架,用于构建富互联网应用程序(RIA),它基于ActionScript和MXML,提供了丰富的图形和交互...

    Flex ColumnChart 样式设置

    Flex ColumnChart 样式设置,详细设置。

    flex3 样式设计器

    在Flex3中,样式系统是至关重要的,因为它允许开发者通过定义和应用样式来控制应用程序的外观和感觉。样式可以涵盖字体、颜色、大小、边框、间距等各个方面,使得UI设计具有高度的灵活性和一致性。Flex3样式设计器...

    flex 样式选择器

    Flex样式选择器是Adobe Flex框架中的一个重要组成部分,用于在Flex应用程序中定义和管理用户界面元素的外观。这个选择器允许开发者以声明式的方式定制控件的样式,从而实现丰富的视觉效果和交互体验。Flex框架是基于...

    Flex 通过年月控制日历

    本文将详细探讨如何在Flex中通过年月控制日历,包括年月控件、日历控件(包含阴历和阳历)、年月控件与日历控件的级联以及封装日历控件的单击和双击事件处理。 首先,让我们了解年月控件。在Flex中,我们可以创建...

    Flex样式设计工具

    Flex样式设计工具是一种用于开发Adobe Flex应用程序的辅助软件,它帮助开发者更轻松地管理与定制Flex组件的外观和样式。Flex是一种开源框架,主要用于构建富互联网应用程序(RIA),尤其是在使用ActionScript和MXML...

    flex 样式浏览器生成器

    Flex样式浏览器生成器是一款强大的工具,专为前端开发者设计,旨在简化使用Flex布局时的CSS编写过程。这个工具提供了一个可视化的界面,允许用户通过直观地拖拽和调整元素来生成相应的CSS代码,极大地提高了开发效率...

    flex 开发实例 用于flex 沙箱的控制

    在这个“Flex开发实例 用于Flex沙箱的控制”中,我们将深入探讨如何利用Flex技术来管理和控制沙箱环境,以确保在富客户端中的安全运行。 Flex沙箱是Flex应用程序运行时的一个核心组件,它模仿了Adobe Flash Player...

    关于flex 的css样式表

    - 弹性盒模型:通过`flex-grow`和`flex-shrink`控制元素大小,实现等间距或自适应布局。 - 响应式图片:利用`align-self`控制图片垂直对齐方式。 - 多列布局:通过改变`flex-direction`实现列布局。 6. **OSXcss...

Global site tag (gtag.js) - Google Analytics