首页 诗词 字典 板报 句子 名言 友答 励志 学校 网站地图
当前位置: 首页 > 教程频道 > 媒体动画 > flex >

Flex多选框的兑现

2012-11-23 
Flex多选框的实现1. 现在界面上放一个容器,如BorderContainer ,id为 bc1 设置其深度depth为32. 在bc1上

Flex多选框的实现

1. 现在界面上放一个容器,如BorderContainer ,id为 "bc1" 设置其深度depth为3;

2. 在bc1上加入一些子元素,如3个button,id分别为bt1、bt2、bt3 ,各自的坐标请自行设置 ;

3. 在界面上再放一个容易BorderContainer,id为 "bc1" 设置其深度depth为2,表示其在bc1的下面,其backgroundAlpha值设为0.01 ;

4. 为bc1增加鼠标按下的监听事件: bc1.addEventListener(MouseEvent.MOUSE_DOWN,onMouseDown);

5.?onMouseDown()方法的代码:

?

private function onMouseDown(e:MouseEvent):void {bc2.depth = 4;    //将bc2的深度设为4,表示其显示在bc1之上curPositionX = e.localX;   //当前的x坐标curPositionY = e.localY;   //当前的y坐标startPointX = curPositionX;  //起点坐标xstartPointY = curPositionY;  //起点坐标ybc2.addEventListener(MouseEvent.MOUSE_MOVE,onResize);  //为bc2增加鼠标移动事件bc2.addEventListener(MouseEvent.MOUSE_UP,onMouseUp);  //为bc2增加鼠标放开事件}

?6. onResize()方法的代码:

?

private function onResize(e:MouseEvent):void {curPositionX = e.localX;    //当前的x坐标curPositionY = e.localY;    //当前的y坐标endPointX = curPositionX;    //结束点坐标xendPointY = curPositionY;    //结束点坐标ydrawBorder();    //画框}

?7. drawBorder()方法的代码:

?

private function drawBorder():void {//画框var r_width:Number = Math.abs(startPointX - endPointX);     //框的长var r_height:Number = Math.abs(startPointY - endPointY);    //框的宽xCoordinate = Math.min(startPointX, endPointX);       //框的x坐标        yCoordinate = Math.min(startPointY, endPointY);       //框的y坐标        //recBorder为一个BorderContainer,在开头的变量中声明并且new一个,现在来为recBorder设定样式recBorder.visible = true;recBorder.alpha = 1;recBorder.z = 3;recBorder.x = xCoordinate;recBorder.y = yCoordinate;recBorder.width = r_width;recBorder.height = r_height;recBorder.setStyle("borderWeight" , 2);recBorder.setStyle("backgroundAlpha", 0);bc2.addElement(recBorder);     //把框添加到bc2中        //接下来判断bt1、bt2、bt3是否在框中,如果存在,则为按钮增加样式等,此处代码省略,请自由发挥}

?

?8. 多选玩以后,鼠标该放开了,这时候该让多选框消失了,多选完成。

private function onMouseUp(e:MouseEvent):void {recBorder.visible = false;  //设置多选框为不可见bc2.depth = 2;     //设置bc2的深度为2,使其显示在bc1的下面bc2.removeEventListener(MouseEvent.MOUSE_MOVE,onResize);  //为bc2移除事件bc2.removeEventListener(MouseEvent.MOUSE_UP,onMouseUp);  //为bc2移除事件}
?

热点排行