DropDownButton

自定义带有下拉菜单的组件 - DropDownButton

常见的一种按钮形式，一个按钮，右边一个小按钮，单击后出现下拉菜单，可以根据选择的下拉菜单项进行下一步处理，这里是演示(由于放在qq的临时上传空间里，不保证一直能用)：

组件全部代码如下(图片请自行替换)：

DropDownButton.mxml

<?xml version="1.0" encoding="utf-8"?>
<mx:ButtonBar xmlns:mx="http://www.adobe.com/2006/mxml"
creationComplete="init()">
<mx:Script>
   <![CDATA[
    import mx.controls.Menu;
    import mx.collections.ArrayCollection;
    import mx.events.MenuEvent;
    import mx.events.ItemClickEvent;

    [Embed(source='./assets/downarrow.png')]
      public static var downarrow:Class;

       private var myMenu:Menu;
       public var menuDatas:ArrayCollection = new ArrayCollection();

       //选中的下拉菜单项
       public var selected:String = null;

    function init():void{
     this.addEventListener(ItemClickEvent.ITEM_CLICK,itemclickHandler);
     var second:Object = this.getChildAt(1);
     second.width = "20";
    }

    //显示菜单
            private function showMenus():void {
            var menus:XML = <menuitem/>;

            for (var i:int = 0;i<menuDatas.length;i++){
               var node:XML = <menuitem/>;
              node.@label = menuDatas[i].label;
              node.@data = menuDatas[i].data;
              node.@type = menuDatas[i].type;
               menus.appendChild(node);
            }

                myMenu= Menu.createMenu(this, menus, false);
                myMenu.labelField="@label";
                myMenu.addEventListener(MenuEvent.ITEM_CLICK, menuHandler);

                var p:Point =this.localToGlobal(new Point());
                myMenu.show(p.x + this.width - this.getChildAt(1).width, p.y + this.height);
            }

            //事件处理
       function itemclickHandler(event:ItemClickEvent):void{
        switch (event.index){
         case 0:
          //不处理，事件广播出去
          this.dispatchEvent(new MouseEvent(MouseEvent.CLICK));
          break;
         case 1:
          if (menuDatas.length>0){
           showMenus();
          }
          break;

        }
       }

       //处理菜单单击事件，并将当前选择的项作为下拉按钮的提示信息
            private function menuHandler(event:MenuEvent):void {
            selected = event.item.@data;
            var item:Object = this.getChildAt(1);
            item.toolTip = event.item.@label;
            }
   ]]>
</mx:Script>
<mx:dataProvider>
   <mx:Object label="{this.label}"/>
   <mx:Object icon="{downarrow}"/>
</mx:dataProvider>
</mx:ButtonBar>

使用例子：

[Bindable]var menus:ArrayCollection = new ArrayCollection();
function init():void{
for(var i:int = 0;i<5;i++){
   var item:Object = new Object();
   item.label = "label"+i;
   item.data = "data"+i;
   menus.addItem(item);
}
ab.addEventListener(MouseEvent.CLICK,clickhandler);
}

...

function clickhandler(event:MouseEvent):void{
Alert.show("you selected : "+event.target.selected+",how do you want to do next?","you selected:");
}

本站仅提供存储服务，所有内容均由用户发布，如发现有害或侵权内容，请点击举报。