flex toolTip样式设置

最新推荐文章于 2015-03-26 18:28:39 发布

原创最新推荐文章于 2015-03-26 18:28:39 发布 · 105 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#Flex #CSS #Adobe #XML

Flex 专栏收录该内容

197 篇文章

订阅专栏

本文介绍如何使用ActionScript创建自定义的Flash Tooltip，并通过CSS样式进行美化。具体包括自定义Tooltip类的设计、应用样式以及在MXML文件中实现交互。

需要3个文件。一个是样式类，一个样式文件，一个是mxml文件。

●MyToolTip.as

package{
import mx.core.UITextField;
import mx.skins.halo.ToolTipBorder;
import mx.controls.ToolTip;
public class MyToolTip extends ToolTipBorder {


  override protected function updateDisplayList(unscaledWidth:Number,
   unscaledHeight:Number):void{

    var toolTip:ToolTip = (this.parent as ToolTip);
    var textField:UITextField = toolTip.getChildAt(1) as UITextField;
    textField.htmlText = textField.text;


    var calHeight:Number = textField.height;
    calHeight += textField.y*2;
    calHeight += textField.getStyle("paddingTop");
    calHeight += textField.getStyle("paddingBottom");


    var calWidth:Number = textField.textWidth;
    calWidth += textField.x*2;
    calWidth += textField.getStyle("paddingLeft");
    calWidth += textField.getStyle("paddingRight");

    super.updateDisplayList(calWidth, calHeight);
   }
}
}

●style.css

ToolTip{
    font-family:            verdana;
    font-size:              14px;
    color:                  #000000;
    background-color:       #FF00FF;
    background-alpha:       0.85;
    cornerRadius:           10;
    borderSkin:             ClassReference("MyToolTip");
}

●toolTipDemo.mxml

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx=" http://www.adobe.com/2006/mxml " layout="absolute" width="640" height="477">
        <mx:Script>
    <![CDATA[
        [Bindable]
        private var myToolTipText:String = "<b>This is a bold toolTip</b>" ;
    ]]>
</mx:Script>
<mx:Style source="style.css"/>
    <mx:Button label="hover to get tooltip" toolTip="{myToolTipText}"
x="36" y="28"/>
</mx:Application>