FLEX动态弹入弹出 HDividedBox的dividerPress

转载 2012年03月25日 23:30:07

点击HDividedBox的divider时,HDividedBox的一侧隐藏,而当我再次点击divider时显示。

了解到HDividedBox针对divider有:dividerDrag、dividerPress、dividerRelease三个事件。

分别是拖拽、按下、释放。

我选择在按下的时候触发一个事件。然后,在隐藏时,给了一个resize的效果

源码如下:

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
    xmlns:s="library://ns.adobe.com/flex/spark"
    xmlns:esri="http://www.esri.com/2008/ags"
    paddingLeft="0"
    paddingRight="0"
    paddingTop="0"
    paddingBottom="0"
    layout="absolute" >
 <mx:Style>
  
  
 </mx:Style>
 <mx:Script>
  <![CDATA[
   import mx.core.UIComponent;
   import mx.events.DividerEvent;
   
   
   private function hiddenLeft(event:DividerEvent):void{
    var child:UIComponent = event.target.getChildAt(0);
    if(child.width == 0){
     expand1.play();
    }else{
     expand.play();
    }
   }
   
  ]]>
 </mx:Script>
 <mx:Resize id="expand" target="{childcontain}" widthTo="0"
      duration="1500"/>
 <mx:Resize id="expand1" target="{childcontain}" widthTo="100"
      duration="1500"/>        
 <mx:HDividedBox width="100%" height="100%" dividerPress="hiddenLeft(event)" id="container">
  <mx:VDividedBox width="100" height="100%" id="childcontain">
   <mx:Panel width="100%" height="100%" id="pan"/>
  </mx:VDividedBox>
  <mx:Canvas height="100%" width="100%"/>
 </mx:HDividedBox>
</mx:Application>

 

效果:

HDividedBox的dividerPress - lurui110 - lurui110的博客

 

HDividedBox的dividerPress - lurui110 - lurui110的博客

 


RIA编程-神奇的FLEX实战

基于浏览器的富客户端编程,界面比Juery easy ui和extJS的更漂亮,操作更灵活! 而且FLEX的最大优势是采用RPC模式,比AJAX速度更快。 在浏览器中播放视频,FLEX编程占据了垄断地位; FLEX还有push模式开发,是非常重要的技术! 这套 视频的开发环境是:myEclipse10+Flash builder4.6
  • 2016年10月22日 13:12

Flex里改变DividedBox容器的分割图标

在Flex里HDividedBox与VDividedBox都是DividedBox的子容器,所以我们可以分别自定义设置水平分栏与垂直分栏上的图标(注:鼠标移上去时的图标),通过horizontalDi...
  • lihua2915
  • lihua2915
  • 2010-09-19 10:57:00
  • 3281

Flex样式-HDividedBox篇

HDividedBox { dividerAffordance: 30; dividerAlpha: 0.77; dividerColor: #ff0000; dividerT...
  • you23hai45
  • you23hai45
  • 2013-12-29 22:16:28
  • 1552

Flex动态改变按钮图标(icon)

由于Flex支持在AS中动态修改icon属性,所以用clearStyle和setStyle方法 定义图标 [Embed (source="assets/assets.swf", symbol="l...
  • lupeng0527
  • lupeng0527
  • 2010-09-08 12:34:00
  • 3335

每天学一点flex(5):DividedBox和拖拽监听

有时候经常需要使用FB来开发做一些Air工具提供自己学习使用,个人觉得Flex 的3 的版本比较适合做工具,Flex 4 重构架构后部分组件如DataGrid 这类操作反而更加难掌握,每次只能继续使用...
  • hero82748274
  • hero82748274
  • 2015-10-29 21:13:49
  • 762

flex中的分割组件(DividedBox)

Flex中的DividedBox组件也分两种,即VDividedBox(上下分割)和HDividedBox(左右分割)。 ...
  • xinghui_liu
  • xinghui_liu
  • 2013-03-05 13:32:07
  • 811

给HDividedBox的dividerPress

我希望,点击HDividedBox的divider时,HDividedBox的一侧隐藏,而当我再次点击divider时显示。了解到HDividedBox针对divider有:dividerDrag、d...
  • lihua2915
  • lihua2915
  • 2010-09-19 10:54:00
  • 1853

C#检测光盘弹入弹出

  • 2014年09月06日 22:19
  • 43KB
  • 下载

JS动态弹入弹出菜单功能

  • 2009年09月08日 18:03
  • 774B
  • 下载

弹出和弹进光驱命令

第一光驱弹出光盘:eject 第一光驱装入光盘:eject -t第二光驱弹出光盘:eject /dev/cdrom1第二光驱装入光盘:eject /dev/cdrom1 -t...
  • ericming200409
  • ericming200409
  • 2010-03-16 20:56:00
  • 4085
收藏助手
不良信息举报
您举报文章:FLEX动态弹入弹出 HDividedBox的dividerPress
举报原因:
原因补充:

(最多只允许输入30个字)