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

flex 部分样式设置

    博客分类:
  • flex
阅读更多

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute"
xmlns:component="component.*" backgroundGradientAlphas="[1.0, 1.0]"
backgroundGradientColors="[#FFFFFF, #FFFFFF]">
<mx:Script><![CDATA[
        import mx.events.ToolTipEvent;
       import component.BubbleToolTip;
       
        private function createCustomTip(title:String,event:ToolTipEvent):void {
           var bt:BubbleToolTip = new BubbleToolTip();
           bt.text=title;
           content.text = title;
           bt.addChild(ppp);
           ppp.visible=true;
           event.toolTip = bt;
        }
       
        private function positionTip(event:ToolTipEvent):void{
            event.toolTip.x=event.currentTarget.x + event.currentTarget.width + 10;
            event.toolTip.y=event.currentTarget.y; 
        }
    ]]></mx:Script>

<mx:Button id="b1"
        label="Hello world" x="60" y="60"
        toolTip=" "
        toolTipCreate="createCustomTip('Hello World',event)"
        toolTipShow="positionTip(event)"
    />
  <mx:Canvas id="ppp" visible="false" width="50" height="40" cornerRadius="15"
    borderColor="#000000" x="35" y="0" borderStyle="solid" borderThickness="2">
    <mx:Text id= "content" text="xixi" x="4.5" y="5" width="40" height="23.5">
       
        </mx:Text>
        </mx:Canvas>
</mx:Application>
Button样式
<mx:Style>
      Button{
          up-skin:Embed(source="images/bg.swf",symbol="btnUP");
           over-skin:Embed(source="images/bg.swf",symbol="btnOVER");
           down-skin:Embed(source="images/bg.swf",symbol="btnDOWN");
        }
</mx:Style>
<mx:Button id="btn" label="Hello World" width="100" height="60"/>
清单 6. ProgrammaticSkin 的 updateDisplayList 实现代码

override protected function updateDisplayList(unscaledWidth:Number,
unscaledHeight:Number):void {
var g:Graphics = this.graphics;
g.clear();
g.beginFill(0x000000, 0);
g.drawRect(0, 0, unscaledWidth, unscaledHeight);
g.endFill();
g.lineStyle(1, 0x000000, 0.1);
var squareSize:Number = 15;
var numRows:Number = unscaledHeight / squareSize;
var numCols:Number = unscaledWidth / squareSize;
for(var row:Number = 0; row< numRows; row++) {
g.moveTo(0, row * squareSize);
g.lineTo(unscaledWidth, row * squareSize);
}
for(var col:Number = 0; col< numCols; col++) {
g.moveTo(col * squareSize, 0);
g.lineTo(col * squareSize, unscaledHeight);
}
}
清单 7. 图像圆角组件
<?xml version="1.0" encoding="utf-8"?>
<mx:Canvas
    xmlns:mx="http://www.adobe.com/2006/mxml"
    xmlns:filters="flash.filters.*"
    width="100%" height="100%" >

    <mx:Image source="assets/ygy.jpg" x="10" y="10" mask="{maskCanvas}">
        <mx:filters>
            <filters:DropShadowFilter />
        </mx:filters>
    </mx:Image>
   
    <mx:Canvas x="81" y="62" width="344" height="274" backgroundColor="#ff0000"
    id="maskCanvas"  cornerRadius="15" borderStyle="solid"/>
   
</mx:Canvas>
分享到:
评论

相关推荐

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

    由于Flex布局是CSS3的一部分,所以它在现代浏览器中得到了广泛支持。然而,对于较旧的浏览器,可能需要引入polyfill或者使用传统的布局方法作为回退策略。 总的来说,这个“flex移动布局,极简公共样式包”是一个...

    FLEX界面样式表工具

    在Flex开发中,CSS是非常关键的一部分,因为它允许开发者分离界面表现与逻辑,实现更灵活的设计和维护。通过使用CSS,可以统一管理整个应用的样式,确保一致性和可扩展性。Flex中的CSS与Web开发中的CSS有一些相似之...

    应用flash制作flex样式

    Flex是Adobe Flex框架的核心部分,它允许开发人员创建富互联网应用程序(RIA)并构建具有响应式用户界面的桌面和移动应用程序。在本教程中,我们将深入探讨如何利用Flash来设计和实现Flex样式的全面理解。 首先,让...

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

    例如,使用媒体查询针对不同屏幕尺寸设置不同的Flex属性,以实现更好的移动设备适配。 总的来说,这个“flex特效 不错的flex样式生成器”是CSS Flex布局学习和实践的重要辅助工具,能够帮助开发者快速理解和创建...

    Flex样式范例网站

    1. **容器属性**:Flexbox布局由两个主要部分组成——容器(flex container)和子元素(flex items)。容器通过设置`display`属性为`flex`或`inline-flex`来开启Flexbox模式。其他关键属性如`flex-direction`定义...

    flex 样式选择器

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

    Flex样式设计工具

    在Flex开发中,样式主要分为两部分:主题(Themes)和样式表(Style Sheets)。主题是一组预定义的样式,可以全局改变应用的外观,而样式表则允许开发者针对特定组件或组件树设置个性化样式。Flex样式设计工具通常...

    Flex官方设置样式界面源码

    3. **样式生成器(Style Generator)**:当用户完成样式设置后,此模块将生成CSS或MXML代码,方便将样式应用于实际项目。 4. **组件库(Component Library)**:包含所有可选的Flex组件,供用户选择和预览。 通过...

    Flex中的CSS样式

    Flex中的每个组件都有其特定的样式属性,以下列举了部分组件的样式属性: - **`Application`组件样式属性** - `backgroundImage`:背景图 - `backgroundColor`:背景色 - `backgroundGradientColors`:背景渐变...

    Flex 组件边框线样式

    在CSS中,你可以定义通用的类选择器来影响多个组件,或者使用ID选择器来针对特定组件进行样式设置。例如,`.myBorderStyle { border-color: red; border-width: 2px; }`将定义一个红色、2像素宽的边框样式。 5. ...

    Flex3 StyleExplorer 样式生成器

    这个工具是Flex SDK的一部分,帮助用户理解并利用MXML和CSS(Cascading Style Sheets)来控制Flex应用程序的界面风格。 在Flex 3中,样式系统是一个强大的特性,它提供了丰富的自定义可能性,让应用程序界面能够...

    flex 皮肤样式css+style

    而"kingnarestyle.swf"可能是一个预览或者包含自定义皮肤的SWF文件,它可能是Flex应用的一部分,展示了使用特定CSS样式后的界面效果。SWF文件是Adobe Flash的二进制格式,常用于展示动画、交互式内容或者Flex组件的...

    flex自定义创建css样式

    在前端开发领域,Flex布局(Flexible Box)是现代网页设计中不可或缺的一部分,它极大地提高了我们对页面元素排列和布局的控制能力。Flex布局允许我们轻松地处理容器内元素的对齐、顺序以及尺寸调整,特别是在响应式...

    flex组件样式属性中文对照表

    根据给定文件中的标题、描述、以及部分内容,我们可以整理出一系列与Flex组件样式属性相关的知识点。以下是基于这些信息的关键知识点汇总: ### Flex组件样式属性中文对照表 #### 一、主题颜色(Theme Color) - ...

    flex样式源代码

    标题“flex样式源代码”暗示我们将深入探讨Flex布局的核心概念以及如何在实际项目中应用它们。 Flex布局允许我们更轻松地调整元素的大小、顺序和对齐方式,使其适应不同屏幕尺寸和设备。其主要优势在于能够创建灵活...

    Flex 仿Vista 系统样式

    这个压缩包可能包含以下部分:1) 源代码文件,如.mxml或.as文件,包含Flex应用程序和自定义组件的定义;2) 样式表文件,如Vista.css,包含Vista样式的CSS规则;3) 图片资源,如PNG或JPEG,用于创建图形效果;4) 测试...

    flex4 样式

    #### CSS样式设置 Flex4支持多种选择器来定义样式规则: - **Type 选择器**:针对特定类型的组件。例如,`s|Button`用于选择所有`Button`组件。 - **Universal 选择器**:对所有组件生效。例如,`* { fontWeight: ...

    Flex 样式 例子

    Flex是Adobe Flex框架的核心部分,它允许开发人员创建富互联网应用程序(RIA)。在Flex中,样式和皮肤是至关重要的元素,它们决定了用户界面的外观和交互体验。下面将详细讲解Flex样式的相关知识点,以及与压缩包...

    Flex开源项目1个[flex部分]

    在本项目中,"Flex部分"指的是使用Flex框架开发的客户端组件,这些组件通常与Java 2 Enterprise Edition(J2EE)服务器端技术结合,以实现完整的Web应用解决方案。 ### Flex 2.0 Flex 2.0是Adobe公司发布的Flex...

Global site tag (gtag.js) - Google Analytics