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移除事件}?