PopUpBotton控件

 简介  

    PopUpButton控件由两个平行的按钮组成：一个主按钮，和一个叫做pop-up按钮的小一些的、只有一个图标的按钮。主按钮是一个Button控件。

    Pop-up按钮会打开叫做pop-up控件的第二个控件。在PopUpButton控件外的任何地方，或者在pop-up空间中点击，都将关闭pop-up控件。

 

    PopUpButton控件为Button控件添加了一个灵活的pop-up空间接口。一个常见的用处是打开一个List空间或一个Menu空间来改变主按钮的功能和标签。

 

    PopUpButton控件不仅限于显示菜单。它可以显示任意的Flex控件作为pop-up控件。

 

    组件的弹出不会影响主按钮的外观或动作，它可以有独立的动作。

  

    PopUpButton控件是Button控件的子类，并集成了Button控件除了toggle属性和用于被选择按钮的样式之外的全部属性、样式、事件以及方法。

 

    PopUpButton控件有如下特性：

 

    popUp属性定义了pop-up控件（如List或Menu）；

    open()和close()方法可以在程序中打开或关闭pop-up控件；

    open和close事件在pop-up空间打开和关闭时被调度；

    使用popUpSkin和arrowButtonWidth样式属性来定义PopUpButton控件的外观。 

  

创建一个PopUpButton控件

 

<? xml version ="1.0" encoding ="utf-8" ?>
< mx:Application xmlns:mx ="http://www.adobe.com/2006/mxml" layout ="vertical" >
   < mx:Script >
    <![CDATA[
      import mx.controls.Alert;
      import mx.controls.List;
      var popList:List;
      var listItems:Array=[
        {id:"i1",label:"Item1",value:"1"},
        {id:"i2",label:"Item2",value:"2"},
        {id:"i3",label:"Item3",value:"3"},
      ];
      function initPopUp():void{
        popList=new List();
        popList.dataProvider=listItems;
        popList.width=popBtn.width;
        popList.addEventListener(MouseEvent.CLICK,listClick);
        popBtn.popUp=popList;
        
      }
        
      function listClick(event:MouseEvent):void{
        var value=popList.selectedItem;
        popBtn.label="You selected:"+value.label;
      }
        
      function openPop():void{
        log.text="OPEN!";    
      }
        
      function closePop():void{
        log.text="CLOSE!";
      }
    ]]>
   </ mx:Script >
   < mx:Label id ="log" width ="500" textAlign ="center" />
   < mx:PopUpButton id ="popBtn" label ="Please Select......" creationComplete ="initPopUp()" open ="openPop()" close ="closePop()" >
   </ mx:PopUpButton >
</ mx:Application >