关闭

FLEX动态弹入弹出 HDividedBox的dividerPress

标签: flexapplicationencodinglibraryfunctionimport
528人阅读 评论(0) 收藏 举报
分类:

点击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的博客

 


0
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:1615次
    • 积分:25
    • 等级:
    • 排名:千里之外
    • 原创:1篇
    • 转载:2篇
    • 译文:0篇
    • 评论:0条
    文章分类
    文章存档