menu

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
               xmlns:s="library://ns.adobe.com/flex/spark" 
               xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600">
    <fx:Declarations>
        <!-- 将非可视元素（例如服务、值对象）放在此处 -->
    </fx:Declarations>
    <fx:Script>
        <![CDATA[
            import mx.controls.Alert;
            import mx.collections.ArrayCollection;
            [Embed(source="qq.png")]
            private var icon1:Class; 
            [Bindable]
            private var user1:ArrayCollection = new ArrayCollection([
                {label:"lee",data:1,tool:"ps",icon:icon1},
                {label:"lei",data:2,tool:"java",icon:icon1},
                {label:"huang",data:3,tool:"c#",icon:icon1}
            ]) 
            private function changeFn(e:Event):void{
                //Alert.show(cbx1.selectedItem.tool.toString());
            }
        ]]>
    </fx:Script>
    
    
    
    <mx:ComboBox id="cbx1" height="50" selectedIndex="1"     dataProvider="{user1}" width="150" change="changeFn(event)" />
</s:Application>

<?xml version="1.0"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
    
    <mx:Script>
        <![CDATA[
            
            private var backBool:Boolean=true;
            
            private function backHandler():void{
                
                backBtn.addEventListener(Event.ENTER_FRAME,enterFrameHandler);
                
            }
            
            private function enterFrameHandler(event:Event):void{
                
                if(backBool){
                    
                    if(btnGroup.y>-30){
                        
                        btnGroup.y-=5;
                        
                        
                        
                        if(btnGroup.y==-30){
                            
                            backBool=!backBool;
                            
                            backBtn.removeEventListener(Event.ENTER_FRAME,enterFrameHandler);
                            
                        }
                        
                    }        
                    
                }else{
                    
                    if(btnGroup.y<0){
                        
                        btnGroup.y+=5;
                        
                        if(btnGroup.y==0){
                            
                            backBool=!backBool;
                            
                            backBtn.removeEventListener(Event.ENTER_FRAME,enterFrameHandler);
                            
                        }
                        
                    }
                    
                }
                
            }
            
        ]]>
        
    </mx:Script>
    
    <mx:VBox id="btnGroup" y="0" width="100%" backgroundColor="#eeeeee" paddingTop="5" paddingLeft="5" paddingRight="5" paddingBottom="5"> 
        
        <mx:HBox>    
            
            <mx:Button id="searchButton" label="Search Panel"
                       
                       click="myViewStack.selectedChild=search;"/>
            
            <mx:Button id="cInfoButton" label="Customer Info Panel"
                       
                       click="myViewStack.selectedChild=custInfo;"/>
            
            <mx:Button id="aInfoButton" label="Account Panel"
                       
                       click="myViewStack.selectedChild=accountInfo;"/>
            
        </mx:HBox>
        
        <mx:Button id="backBtn" label="back" click="backHandler()"/>
        
    </mx:VBox>
    
    
    
    <mx:ViewStack y="70" id="myViewStack" borderStyle="solid" width="100%" height="80%">
        
        
        
        <mx:Canvas id="search" backgroundColor="#FFFFCC" label="Search" width="100%" height="100%">
            
            <mx:Label text="Search Screen" color="#000000"/>
            
        </mx:Canvas>
        
        
        
        <mx:Canvas id="custInfo" backgroundColor="#CCFFFF" label="Customer Info" width="100%" height="100%">
            
            <mx:Label text="Customer Info" color="#000000"/>
            
        </mx:Canvas>
        
        
        
        <mx:Canvas id="accountInfo" backgroundColor="#FFCCFF" label="Account Info" width="100%" height="100%">
            
            <mx:Label text="Account Info" color="#000000"/>
            
        </mx:Canvas>
        
    </mx:ViewStack>
    
    
    
</mx:Application>

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" >
    <mx:XMLList id="myXMLList"> <!-- 添加菜单项 -->
        <menuiem id="menu1">
            <menuiem id="SubMenu11" type="radio" groupName="one"/>
            <menuiem id="SubMenu12" type="radio" groupName="one"/>
        </menuiem>
        
        <menuiem id="menu2">
            <menuiem id="SubMenu21" type="radio" groupName="two"/>
            <menuiem id="SubMenu22" type="radio" groupName="two"/>
        </menuiem>
        
        <menuiem id="menu3">
            <menuiem id="SubMenu31" type="radio" groupName="three"/>
            <menuiem id="SubMenu32" type="radio" groupName="three"/>
        </menuiem>
        
        <menuiem id="menu4">
            <menuiem id="SubMenu41" type="radio" groupName="four"/>
            <menuiem id="SubMenu42" type="radio" groupName="four"/>
        </menuiem>
    </mx:XMLList>
    
    
    <!-- 设置菜单项的状态 -->
    <mx:states>
        <mx:State name="index1">                    <!--新建“index1”状态-->
            <mx:AddChild position="lastChild">
                <!--添加VBox组件，组件颜色为“#FFFFFF”，透明度为0.5-->
                <mx:VBox id="myVBox1" x="{myMenuBar.x}" y="{myMenuBar.y+myMenuBar.height}" width="{myMenuBar.width}"
                         height="248" backgroundColor="#FFFFFF" backgroundAlpha="0.5" fontSize="12">
                </mx:VBox>
            </mx:AddChild>
        </mx:State>
        <mx:State name="index2">                    <!--新建“index2”状态-->
            <mx:AddChild position="lastChild">
                <!--添加VBox组件，组件颜色为“#F5E531”，透明度为0.5-->
                <mx:VBox id="myVBox2" x="{myMenuBar.x}" y="{myMenuBar.y+myMenuBar.height}" width="{myMenuBar.width}"
                         height="248" backgroundColor="#F5E531" backgroundAlpha="0.5">
                </mx:VBox>
            </mx:AddChild>
        </mx:State>
    </mx:states>
    
    
    <!--定义一级菜单切换效果-->
    <mx:transitions>
        <!--可以重复-->
        <mx:Transition id="myTransition1" fromState="*" toState="index1">
            <mx:Parallel target="{myVBox1}">
                <mx:WipeDown duration="2000"/>
                <mx:Dissolve alphaFrom="0.0" alphaTo="1.0" duration="2000"/>
            </mx:Parallel>
        </mx:Transition>
        <mx:Transition id="myTransition5" fromState="*" toState="index2"><!-- 从状态*到状态index2 -->
            <mx:Parallel target="{myVBox2}">
                <mx:Blur blurXFrom="0" blurXTo="50" duration="2000"/><!--横坐标向外模糊50个像素 -->
                <mx:Dissolve alphaFrom="0.0" alphaTo="1.0" duration="2000"/>
            </mx:Parallel>
        </mx:Transition>
    </mx:transitions>
    <mx:Script>
 <!-- 定义状态的切换-->
        <![CDATA[
            import mx.events.MenuEvent;
            private function menuClickHandle(e:MenuEvent):void {
                if (e.label == "menu1"||e.label =="menu2"||e.label =="menu3"||e.label =="menu4")
                    currentState = "index1";
                else if (e.label == "SubMenu11"||e.label == "SubMenu12"||e.label == "SubMenu21"||e.label == "SubMenu22"||e.label == "SubMenu31"||e.label == "SubMenu32"||e.label == "SubMenu41"||e.label == "SubMenu42")
                    currentState = "index2";
            }
        ]]>
    </mx:Script>
    <mx:MenuBar id="myMenuBar" y="40" width="414" dataProvider="{myXMLList}" labelField="@id" showRoot="false" horizontalCenter="0" change="menuClickHandle(event)" height="36">
    </mx:MenuBar>
</mx:Application>