`
yaoweinan
  • 浏览: 132690 次
  • 性别: 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官方设置样式界面源码

    Flex 官方做的一个Demo,能个可视化的对Flex的大部分组件进行样式设置,设置之后能够生成样式表。

    flex4自定义组件皮肤

    你还在头痛flex4组件皮肤怎么自定义吗?看我给你们上传的吧;因皮肤中还是有部分mx组件,如果不能正常使用,请自己把所以mx组件改成sp组件

    Flex 3 Cookbook 中文版

    Flex技术可以分为UI技术、数据技术和服务器端技术三大部分。本书覆盖了Flex应用开发者可能遇到的绝大部分技术主题,包括:如何使用各类Flex组件;如何使用视图状态、样式单、特效以及拖拽技术进行美化设计和加强应用...

    跟我StepByStep学FLEX教程-王一松.pdf

    1 16 跟我StepByStep学FLEX教程------Demo8之样式和主题 1 17 跟我StepByStep学FLEX教程------自定义主题 1 18 跟我StepByStep学FLEX教程------FlexUnit4 alpha 1 0 5 4发布 1 19 跟我StepByStep学FLEX教程------...

    Flex 3 Cookbook(高清PDF中文版)

    Flex技术可以分为UI技术、数据技术和服务器端技术三大部分。本书覆盖了Flex应用开发者可能遇到的绝大部分技术主题,包括:如何使用各类 Flex组件;如何使用视图状态、样式单、特效以及拖拽技术进行美化设计和加强...

    理解Flex3的组件和框架的生命周期

    Adobe Flex 框架的SDK 美中不足之处就是部分由良好的半黑盒子系统所创建;这就是说, 在大多数情况下,我们这些开发者在项目周期中没有时间或精力去真正地深入到未知领域。 从技术上来讲,Flex 框架的不是一个黑盒子...

    Vue自定义日期输入框组件.zip

    下面放置一个日历组件,样式设置为position: absolute; 4、点击下拉选择按钮(倒三角形)时,显示日历组件,并添加全局click事件,click事件的作用是不管点击在哪里都关闭日历组件,当点击日历区域时,要进行阻止...

    H5+CSS3.zip

    css字体样式:font-family设置字体系列,font-size设置字体大小,font-weight设置字体粗细,font-style设置字体样式,color设置字体颜色的三种形式,font的简写; css文本样式:使用text-decoration添加文本修饰,...

    详解纯css实现瀑布流(multi-column多列及flex布局)

    瀑布流的布局自我感觉还是很吸引人的,最近又看到实现瀑布流这个做法,在这里记录下,特别的,感觉flex布局实现瀑布流还是有点懵的样子,不过现在就可以明白它的原理了 1.multi-column多列布局实现瀑布流 先简单的讲...

    关于皮肤 flex

    “施加皮肤”是通过改变或者替换组件的可视化元素来改变组件外观的过程。...皮肤能够定义组件在不同状态下的全部或部分外观。例如,Button 控件有八种可能的状态,并 有八个与之相关的皮肤属性,如下面例子所示:

    style:将样式对象转换为字符串

    将样式对象转换为字符串。 安装 $ npm install weo-edu/style 例子 // output: "margin-left:10px;flex:1;" style ( { marginLeft : '10px' , flex : 1 } ) 执照 麻省理工学院执照 版权所有:copyright:2015,Weo....

    前端初中高面试题及答案

    important &gt; 行内样式(比重1000)&gt; ID 选择器(比重100) &gt; 类选择器(比重10) &gt; 标签(比重1) &gt; 通配符 &gt; 继承 &gt; 浏览器默认属性 3. 垂直居中几种方式? 单行文本: line-height = height 图片: vertical-align:...

    flexcol-mosaic:这是一个很小JavaScript库(仅1.2kB),可通过动态高度检测在多列中启用镶嵌网格

    JavaScript部分负责根据所需的列数动态设置容器的高度。 您可以在查看如何使用它?CSS 首先,您必须在样式表中添加一些CSS规则: . flexcol-container { box-sizing : border-box; display : -webkit-flex; display...

    css入门笔记

    独立于任何网页位置处,声明一个样式文件(.css为后缀),在文件中声明样式,在使用的网页中引入.css文件。 使用步骤: 1.创建样式表文件(.css) 2.在样式文件中编写样式规则 3.在网页中对样式文件进行引入 &lt...

    大一网页设计课程期末大作业(包含说明文档)

    2. 使用Flex布局:主页含header, main, footer, nav, section等部分 3. 使用响应式网页设计 4. 使用HTML5元素,CSS3常用样式 5. JavaScript动态更新页面上元素的内容,事件响应 6. 含必要的图片、表格、列表、链接 7...

    vue自定义导航菜单组件.zip

    一般用于后台管理系统的导航菜单,附源码,有兴趣的朋友可以参考自行修改,涉及到知识点:1、flex布局,用好flex,能够解决布局的大部分问题2、鼠标经过改变子元素样式3、鼠标经过改变父元素样式4、动态修改class5、...

    公众号网页flexible与jquery-weui样式冲突

    引入之后发现大部分都可以,但是有些机型中元素都特别小,后来发现jquery-weui会对有些分辨率做兼容,比如下图 而且都是加了最大权重的,而flexible在给html动态加字体大小的时候,由于权重小,就会被覆盖。 所以...

    基于asp.net技术 学生留言板的设计与实现

    可以在实践过程中掌握ASP.NET技术的部分使用方法,如各种控件的使用、数据库的连接、数据源的配置、登录注册功能逻辑代码的编写等,BootStrap前端框架前端样式框架的使用,包括通过栅格系统实现页面的自适应、Flex...

Global site tag (gtag.js) - Google Analytics