您好,欢迎来到我要学flash网!登录注册

Flex 4中如何创建特定显示效果Spark Panel的例子

来源:我要学flash网 | 作者:admin | 发表时间:2012-02-04 | 点击:  次

接下来的例子演示了Flex 4中如何通过showEffect和hideEffect,创建特定显示,隐藏效果Spark Panel。
 

  1. <?xml version="1.0" encoding="utf-8"?>   
  2. <s:Application name="Spark_Panel_showEffect_test"   
  3.         xmlns:fx="http://ns.adobe.com/mxml/2009"   
  4.         xmlns:s="library://ns.adobe.com/flash.com/article/flex' target='_blank'>flex/spark"   
  5.         xmlns:mx="library://ns.adobe.com/flash.com/article/flex' target='_blank'>flex/halo">   
  6.     <s:layout>   
  7.         <s:VerticalLayout />   
  8.     </s:layout>   
  9.     
  10.     <fx:Declarations>   
  11.         <s:Parallel id="showEff">   
  12.             <s:Rotate3D angleYFrom="-90" angleYTo="0" />   
  13.             <s:Fade alphaFrom="0.0" alphaTo="1.0" />   
  14.         </s:Parallel>   
  15.     
  16.         <s:Parallel id="hideEff">   
  17.             <s:Rotate3D angleYFrom="0" angleYTo="-90" />   
  18.             <s:Fade alphaFrom="1.0" alphaTo="0.0" />   
  19.         </s:Parallel>   
  20.     </fx:Declarations>   
  21.     
  22.     <mx:ApplicationControlBar width="100%" cornerRadius="0">   
  23.         <s:Button id="btn"   
  24.                 label="Toggle Panel visibility"   
  25.                 click="panel.visible = !panel.visible;" />   
  26.     </mx:ApplicationControlBar>   
  27.     
  28.     <s:Group width="100%" height="100%">   
  29.         <s:Panel id="panel"   
  30.                 title="Panel title"   
  31.                 showEffect="{showEff}"   
  32.                 hideEffect="{hideEff}"   
  33.                 horizontalCenter="0" verticalCenter="0">   
  34.             <s:layout>   
  35.                 <s:VerticalLayout />   
  36.             </s:layout>   
  37.             <mx:Form>   
  38.                 <mx:FormItem label="From:" width="100%">   
  39.                     <s:DropDownList id="fromEmail"   
  40.                             requireSelection="true"   
  41.                             width="100%">   
  42.                         <s:ArrayList source="me@me.com" />   
  43.                     </s:DropDownList>   
  44.                 </mx:FormItem>   
  45.                 <mx:FormItem label="To:" width="100%">   
  46.                     <s:TextInput id="toEmail" width="100%" />   
  47.                 </mx:FormItem>   
  48.                 <mx:FormItem label="Message:" width="100%">   
  49.                     <s:TextArea id="message" width="100%" />   
  50.                 </mx:FormItem>   
  51.                 <mx:FormItem horizontalAlign="right" width="100%">   
  52.                     <s:Button label="Send" />   
  53.                 </mx:FormItem>   
  54.             </mx:Form>   
  55.         </s:Panel>   
  56.     </s:Group>   
  57.     
  58. </s:Application> 

 

    顶一下
    (0)
    0%
    踩一下
    (0)
    0%
    本文引用地址:
      最新评论: 共有位网友发表了评论
      发表评论:
    请自觉遵守互联网相关的政策法规,严禁发布色情、暴力、反动的言论。
    评价:
    表情:
    用户名: 密码: 验证码: