波斯马BOSSMA Information Technology

PopUpButton控件组合了两个控件: 一个Button控件和一个较小的pop-up控件,pop-up控件只有一个图标。
当点击Button控件的时候, 打开pop-up控件. 在PopUpButton控件之外或在pop-up控件中点击鼠标, 将关闭pop-up控件。

PopUpButton控件是Button控件的一个子类，继承了Button控件的所有properties, styles, events, and methods, 还有toggle property的异常和selected button的样式.

PopUpButton控件的常用作打开一个列表(List)控件或一个菜单(Menu)控件，用来改变Button控件的函数或者label属性。

首先看一个例子：

<?xml version="1.0"?>
<!-- controls\button\PopUpButtonMenu.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
??? height="600" width="600">

??? <mx:Script>
??????? <![CDATA[
??????????? import mx.controls.*;
??????????? import mx.events.*;

??????????? //声明一个Menu控件
??????????? private var myMenu:Menu;

??????????? // 初始化Menu控件,
??????????? // 并作为PopUpButton控件的pop up对象
??????????? private function initMenu():void {
??????????????? myMenu = new Menu();
??????????????? var dp:Object = [
????????????????? {label: "New Folder"},
????????????????? {label: "Sent Items"},
????????????????? {label: "Inbox"}
??????????????? ];???????
??????????????? myMenu.dataProvider = dp;
??????????????? //添加一个监听事件
??????????????? myMenu.addEventListener("itemClick", changeHandler);
??????????????? popB.popUp = myMenu;//设置popB的popUp对象
??????????? }

??????????? // Menu控件选项变化时触发事件
??????????? private function changeHandler(event:MenuEvent):void {
??????????????? var label:String = event.label;???????
??????????????? popTypeB.text=String("Moved to " + label);//设置popTypeB的text
??????????????? popB.label = "Put in: " + label;//设置PopUpButton的label
??????????????? popB.close();//关闭pop up
??????????? }
??????? ]]>
??? </mx:Script>

??? <mx:VBox>
??????? <mx:Label text="Main button mimics the last selected menuItem."/>
??????? <mx:PopUpButton id="popB"
??????????? label="Edit"?
??????????? width="135"
??????????? creationComplete="initMenu();"/>

??????? <mx:Spacer height="50"/>
??????? <mx:TextInput id="popTypeB"/>
??? </mx:VBox>
</mx:Application>

效果如图:

有几个快捷键，可以参考一下:
空格键 点击Main Button.
Control+Down Arrow 打开pop up控件，并触发open事件
Control+Up Arrow 关闭pop up控件，并触发close事件

你可以通过以下几种方法控制PopUpButton控件
1、移动鼠标到PopUpButton控件的任意一部分，可以使控件的border高亮；
2、点击PopUpButton触发click事件；
3、点击Button控件打开pop-up控件，触发PopUpButton控件的open事件；
4、点击PopUpButton控件外的任意位置, 或者pop-up控件, 关闭pop-up控件，触发PopUpButton事件。

另外你可以使用popUpSkin和arrowButtonWidth样式属性来定义PopUpButton控件的外观.

关键字: Flex PopUpButton