Flex里改变DividedBox容器的分割图标
来源:互联网 发布:软件项目风险定义 编辑:程序博客网 时间:2024/05/22 06:56
在Flex里HDividedBox与VDividedBox都是DividedBox的子容器,所以我们可以分别自定义设置水平分栏与垂直分栏上的图标(注:鼠标移上去时的图标),通过horizontalDividerCursor或者verticalDividerCursor属性指定嵌入的图标文件。下面代码中分别以多种方式实现,效果是一样的
DividedBox.mxml
- <?xml version="1.0" encoding="utf-8"?>
- <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
- preloader="com.preload.PreLoad" backgroundColor="0x414141"
- layout="horizontal" horizontalAlign="center" >
- <!--上面preload属性与下面外部CSS可以删除它-->
- <mx:Style source="flex/yfskin/yflexskin.css"/>
- <mx:VDividedBox id="vDividedBox"
- verticalDividerCursor="@Embed('image/arrow_v.png')"
- width="50%"
- height="100%">
- <mx:HBox backgroundColor="halogreen"
- width="100%"
- height="100%">
- </mx:HBox>
- <mx:HBox backgroundColor="haloblue"
- width="100%"
- height="100%">
- </mx:HBox>
- </mx:VDividedBox>
- <mx:HDividedBox
- horizontalDividerCursor="@Embed('image/arrow_h.png')"
- width="50%"
- height="100%">
- <mx:HBox backgroundColor="haloorange" width="100%" height="100%"></mx:HBox>
- <mx:HBox backgroundColor="purple" width="100%" height="100%"></mx:HBox>
- </mx:HDividedBox>
- </mx:Application>
Style样式
- <?xml version="1.0" encoding="utf-8"?>
- <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
- preloader="com.preload.PreLoad" backgroundColor="0x414141"
- layout="horizontal" horizontalAlign="center" >
- <!--上面preload属性与下面外部CSS可以删除它-->
- <mx:Style source="flex/yfskin/yflexskin.css"/>
- <mx:Style>
- VDivideBox,HDivideBox {
- verticalDividerCusor: Embed("image/arrow_v.png");
- horizontalDividerCursor: Embed("image/arrow_h.png");
- }
- </mx:Style>
- <mx:VDividedBox id="vDividedBox" width="50%" height="100%">
- <mx:HBox width="100%" height="100%" backgroundColor="halogreen">
- </mx:HBox>
- <mx:HBox width="100%" height="100%" backgroundColor="haloblue">
- </mx:HBox>
- </mx:VDividedBox>
- <mx:HDividedBox width="50%" height="100%">
- <mx:HBox width="100%" height="100%" backgroundColor="haloorange">
- </mx:HBox>
- <mx:HBox width="100%" height="100%" backgroundColor="purple">
- </mx:HBox>
- </mx:HDividedBox>
- </mx:Application>
结合actionscript方式
- <?xml version="1.0" encoding="utf-8"?>
- <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
- preloader="com.preload.PreLoad" backgroundColor="0x414141"
- layout="horizontal" horizontalAlign="center">
- <!--上面preload属性与下面外部CSS可以删除它-->
- <mx:Style source="flex/yfskin/yflexskin.css"/>
- <mx:Script>
- <![CDATA[
- [Embed("image/arrow_v.png")]
- private const VArrowIcon:Class;
- [Embed("image/arrow_h.png")]
- private const HArrowIcon:Class;
- private function vDividerIcon():void
- {
- vDividedBox.setStyle("verticalDividerCursor", VArrowIcon);
- }
- private function hDividerIcon():void
- {
- hDividedBox.setStyle("horizontalDividerCursor", HArrowIcon);
- }
- ]]>
- </mx:Script>
- <mx:VDividedBox id="vDividedBox" width="50%" height="100%" initialize="vDividerIcon();">
- <mx:HBox width="100%" height="100%" backgroundColor="halogreen">
- </mx:HBox>
- <mx:HBox width="100%" height="100%" backgroundColor="haloblue">
- </mx:HBox>
- </mx:VDividedBox>
- <mx:HDividedBox id="hDividedBox" width="50%" height="100%" initialize="hDividerIcon();">
- <mx:HBox width="100%" height="100%" backgroundColor="haloorange">
- </mx:HBox>
- <mx:HBox width="100%" height="100%" backgroundColor="purple">
- </mx:HBox>
- </mx:HDividedBox>
- </mx:Application>
纯actionscript方式
- <?xml version="1.0" encoding="utf-8"?>
- <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
- preloader="com.preload.PreLoad" backgroundColor="0x414141"
- layout="horizontal" horizontalAlign="center" initialize="init();">
- <!--上面preload属性与下面外部CSS可以删除它-->
- <mx:Style source="flex/yfskin/yflexskin.css"/>
- <mx:Script>
- <![CDATA[
- import mx.containers.HBox;
- import mx.containers.VBox;
- import mx.containers.VDividedBox;
- import mx.containers.HDividedBox;
- [Embed("image/arrow_v.png")]
- private const VArrowIcon:Class;
- [Embed("image/arrow_h.png")]
- private const HArrowIcon:Class;
- private var vDividedBox:VDividedBox;
- private var hDividedBox:HDividedBox;
- private var hBox1:HBox;
- private var vBox1:VBox;
- private var hBox2:HBox;
- private var vBox2:VBox;
- private function init():void
- {
- //定义四个Box
- hBox1 = new HBox;
- hBox1.percentWidth = 100;
- hBox1.percentHeight = 100;
- hBox1.setStyle("backgroundColor", "halogreen");
- vBox1 = new VBox;
- vBox1.percentWidth = 100;
- vBox1.percentHeight = 100;
- vBox1.setStyle("backgroundColor", "haloblue");
- hBox2 = new HBox;
- hBox2.percentWidth = 100;
- hBox2.percentHeight = 100;
- hBox2.setStyle("backgroundColor", "haloorange");
- vBox2 = new VBox;
- vBox2.percentWidth = 100;
- vBox2.percentHeight = 100;
- vBox2.setStyle("backgroundColor", "purple");
- //垂直Divided
- vDividedBox = new VDividedBox();
- vDividedBox.percentWidth = 50;
- vDividedBox.percentHeight = 100;
- vDividedBox.addChild(hBox1);
- vDividedBox.addChild(vBox1);
- vDividedBox.setStyle("verticalDividerCursor", VArrowIcon);
- addChild(vDividedBox);
- //水平Divided
- hDividedBox = new HDividedBox();
- hDividedBox.percentWidth = 50;
- hDividedBox.percentHeight = 100;
- hDividedBox.addChild(hBox2);
- hDividedBox.addChild(vBox2);
- hDividedBox.setStyle("horizontalDividerCursor", HArrowIcon);
- addChild(hDividedBox);
- }
- ]]>
- </mx:Script>
- </mx:Application>
- Flex里改变DividedBox容器的分割图标
- Flex里改变DividedBox容器的分割图标
- Flex里改变DividedBox容器的分割图标 .
- flex中的分割组件(DividedBox)
- Flex替换DividedBox的Divider图标并实现可关闭隐藏功能
- 改变flex tree节点图标
- Flex两种改变树结点图标的方法
- Flex改变Tree树的节点图标和颜色
- 改变窗口的图标
- flex的tree根据属性值改变所有节点图标的方法
- Flex拖拽-Canvas容器里拖动Box
- flex常用的容器
- Flex中如何利用closeButtonSkin或closeButtonUpSkin, closeButtonOverSkin, closeButtonDownSkin, closeButtonDisabledSkin样式,改变TitleWindow容器的
- flex用AS改变MXML里定义的子对象的属性例如visible
- 在循环里改变一个容器的长度是一件愚蠢的事情
- flex里的this
- 容器里的查找
- 改变Jtree节点的图标
- 【转】Linux支持U盘的一些内核选项
- USACO做题介绍
- 相对的时间
- Flex里改变DividedBox容器的分割图标
- IE下导出Excel
- Flex里改变DividedBox容器的分割图标
- 一个能够检查Windows传递给窗口消息处理程序的键盘内容和字符消息的程序
- 简陋,山寨,Everything,桌面搜索,原理,源码
- Hibernate总结
- RS维护手册
- JMeter打开Badboy生成的jmx文件出错 error in testplan
- Learning Perl(Perl语言入门)学习笔记(1)
- toc文件头格式注释
- C#数字金额转成大写汉字