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;  //起点坐标x
	startPointY = curPositionY;  //起点坐标y
	bc2.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;    //结束点坐标x
	endPointY = curPositionY;    //结束点坐标y
	drawBorder();	    //画框
}

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