今天扩展实现了DividedBox的“点击展开/隐藏”功能。
DividedBox默认只提供Drag功能,如果要想提供“点击展开/隐藏”功能,那么就需要自己扩展实现了。一般来讲,有两种方式:
(1) 一种方式是extends DividedBox实现类,注册DividerPress事件监听,来达到效果。这种方式的弊端是整个“拖拽线”都会被监听。一般不推荐采用这种方式。
(2) 一种方式是利用DividedBox上的“dividerSkin”这个style属性来自定义拖拽对象样式,并注册MouseClick事件进行处理。一般这种方式用的比较多。
接下来,就讲讲第二种方式的实现:
首先自定义一个DividerBox类,这个类需要被设置到“dividerSkin”这个style属性上。
只需要把这个DividerBox进行设到“dividerSkin”这个style属性上即可,It’s easy.
main_DividBox.setStyle("dividerSkin",DividerBox);
现实中的处理比上面的样例类要复杂很多,毕竟有可能“左隐藏”“右隐藏”“下隐藏”,但剩下的只是围绕这个进行丰富和扩展而已。
DividedBox默认只提供Drag功能,如果要想提供“点击展开/隐藏”功能,那么就需要自己扩展实现了。一般来讲,有两种方式:
(1) 一种方式是extends DividedBox实现类,注册DividerPress事件监听,来达到效果。这种方式的弊端是整个“拖拽线”都会被监听。一般不推荐采用这种方式。
(2) 一种方式是利用DividedBox上的“dividerSkin”这个style属性来自定义拖拽对象样式,并注册MouseClick事件进行处理。一般这种方式用的比较多。
接下来,就讲讲第二种方式的实现:
首先自定义一个DividerBox类,这个类需要被设置到“dividerSkin”这个style属性上。
package
{
import flash.events.MouseEvent;
import mx.containers.Box;
import mx.containers.DividedBox;
import mx.controls.Image;
public class DividerBox extends Box
{
[Embed(source='/assets/images/left.gif')]
public static const DividerIcon_left:Class;
[Embed(source='/assets/images/right.gif')]
public static const DividerIcon_right:Class;
private var image:Image = new Image();
private var bOpened:Boolean = true;
private var dividbox:DividedBox = null;
public function DividerBox()
{
super();
this.width = 10;
this.height = 72;
this.clipContent = true;
image.width = 10;
image.height = 72;
this.addChild( image );
//我这个是在一个HdividedBox中,其默认对dividerbox进行了旋转,所以需要旋转回来。
image.rotation = 90;
this.addEventListener(MouseEvent.CLICK,onMouseClick);
}
override protected function createChildren():void{
super.createChildren();
dividbox = this.parent.parent.parent as DividedBox;
image.source = DividerIcon_left;
}
public function onMouseClick(event:MouseEvent):void{
if(bOpened){
image.source = DividerIcon_right;
dividbox.getChildAt(0).width = 0;
bOpened = false;
}else{
bOpened = true;
image.source = DividerIcon_left;
dividbox.getChildAt(0).width = 180;
}
}
}
}
只需要把这个DividerBox进行设到“dividerSkin”这个style属性上即可,It’s easy.
main_DividBox.setStyle("dividerSkin",DividerBox);
现实中的处理比上面的样例类要复杂很多,毕竟有可能“左隐藏”“右隐藏”“下隐藏”,但剩下的只是围绕这个进行丰富和扩展而已。