zoukankan      html  css  js  c++  java
  • Flex3 Panel挤压伸缩效果

    不多啰嗦,直接贴代码!

    <?xml version="1.0" encoding="utf-8"?>
    <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" currentState="stateOne">
        
    <mx:Style>
            Application{
                background-image:Embed("assets/images/back2.png");
            }
            ApplicationControlBar{
                background-color:#FF6600;
            }
            Panel{
                 background-image:Embed("assets/images/back.png");
                 vertical-align:middle;
                 horizontal-align:center;
            }
            Label{
                font-size:20;
                font-weight:bold;
            }
        
    </mx:Style>
        
        
    <mx:states>
            
    <mx:State name="stateOne">
                
    <mx:SetProperty target="{p1}" name="height" value="90%"/>
                
    <mx:SetProperty target="{p2}" name="visible" value="false"/>
                
    <mx:SetProperty target="{p3}" name="visible" value="false"/>
            
    </mx:State>
            
    <mx:State name="stateTwo">
                
    <mx:SetProperty target="{p1}" name="height" value="40%"/>
                
    <mx:SetProperty target="{p2}" name="visible" value="true"/>
                
    <mx:SetProperty target="{p2}" name="height" value="40%"/>
                
    <mx:SetProperty target="{p3}" name="visible" value="false"/>
            
    </mx:State>
            
    <mx:State name="stateThree">
                
    <mx:SetProperty target="{p1}" name="height" value="30%"/>
                
    <mx:SetProperty target="{p2}" name="height" value="30%"/>
                
    <mx:SetProperty target="{p3}" name="height" value="30%"/>
            
    </mx:State>
        
    </mx:states>
        
        
    <mx:transitions>
            
    <mx:Transition fromState="stateOne" toState="stateTwo">
                
    <mx:Sequence duration="500">
                
    <mx:Resize targets="{[p1,p2]}" />
                
    </mx:Sequence>
            
    </mx:Transition>
            
    <mx:Transition fromState="stateOne" toState="stateThree">
                
    <mx:Sequence duration="500">
                
    <mx:Resize targets="{[p1,p3]}" />
                
    </mx:Sequence>
            
    </mx:Transition>
            
    <mx:Transition fromState="stateTwo" toState="stateOne">
                
    <mx:Sequence duration="500">
                
    <mx:Resize targets="{[p1,p2]}" />
                
    </mx:Sequence>
            
    </mx:Transition>
            
    <mx:Transition fromState="stateTwo" toState="stateThree">
                
    <mx:Sequence duration="500">
                
    <mx:Resize targets="{[p1,p2,p3]}" />
                
    </mx:Sequence>
            
    </mx:Transition>
            
    <mx:Transition fromState="stateThree" toState="stateTwo">
                
    <mx:Sequence duration="500">
                
    <mx:Resize targets="{[p1,p2,p3]}" />
                
    </mx:Sequence>
            
    </mx:Transition>
            
    <mx:Transition fromState="stateThree" toState="stateOne">
                
    <mx:Sequence duration="500">
                
    <mx:Resize targets="{[p1,p3]}" />
                
    </mx:Sequence>
            
    </mx:Transition>
        
    </mx:transitions>
        
        
    <mx:ApplicationControlBar dock="true" width="100%" verticalAlign="middle" horizontalAlign="left">
            
    <mx:Spacer width="25"/>
            
    <mx:LinkButton id="button1" label="One" click="currentState='stateOne'"/>
            
    <mx:LinkButton id="button2" label="Two"  click="currentState='stateTwo'"/>
            
    <mx:LinkButton id="button3" label="Three"  click="currentState='stateThree'" />
        
    </mx:ApplicationControlBar>
        
        
    <mx:Panel id="p1" title="Panel one" width="100%" >
            
    <mx:Label id="label1" text="Labe one" />
        
    </mx:Panel>
        
    <mx:Panel id="p2" title="Panel two" width="100%" >
            
    <mx:Label id="label2" text="Labe two" />
        
    </mx:Panel>
        
    <mx:Panel id="p3" title="Panel three" width="100%" >
            
    <mx:Label id="label3" text="Labe three" />
        
    </mx:Panel>
        
    </mx:Application>
  • 相关阅读:
    Android点击按钮退出程序并提醒
    Android项目如何打包成安装包.apk
    java之String字符串根据指定字符转化为字符串数组
    2021春季开课 课程计划
    Android:Unable to find explicit activity class报错
    不用写findViewById的偷懒方法
    人月神话阅读笔记03
    人月神话阅读笔记02
    javaweb验证码
    疫情地图展示
  • 原文地址:https://www.cnblogs.com/dzone/p/2152060.html
Copyright © 2011-2022 走看看