Flex的Accordion控件中如何通过设置openDuration样式设定打开/切换的时间长短的例子

By Minidxer | May 8, 2008

在前面的出色的Flex开源组件库FlexLib中，曾经提到FlexLib的Horizontal Accordion比较类似的，接下来的例子中演示了Accordion控件中如何通过设置openDuration样式设定打开/切换的时间长短。

让我们先来看一下Demo（可以右键View Source或点击这里察看源代码）：


下面是完整代码(或点击这里查看)：

Download: main.mxml
  1. <?xml version="1.0" encoding="utf-8"?>
  2. <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
  3.         layout="vertical"
  4.         verticalAlign="middle"
  5.         backgroundColor="white">
  6.  
  7.     <mx:Script>
  8.         <![CDATA[
  9.             private function init():void {
  10.                 slider.value = accordion.getStyle("openDuration");
  11.             }
  12.         ]]>
  13.     </mx:Script>
  14.  
  15.     <mx:ApplicationControlBar dock="true">
  16.         <mx:Form styleName="plain">
  17.             <mx:FormItem label="openDuration:"
  18.                     direction="horizontal">
  19.                 <mx:HSlider id="slider"
  20.                         minimum="0"
  21.                         maximum="3000"
  22.                         liveDragging="true"
  23.                         snapInterval="100"
  24.                         tickInterval="500"
  25.                         dataTipPrecision="0" />
  26.                 <mx:Label text="{slider.value} ms" />
  27.             </mx:FormItem>
  28.         </mx:Form>
  29.     </mx:ApplicationControlBar>
  30.  
  31.     <mx:Accordion id="accordion"
  32.             openDuration="{slider.value}"
  33.             creationPolicy="all"
  34.             width="100%"
  35.             height="100%"
  36.             initialize="init();">
  37.         <mx:VBox label="Red"
  38.                 backgroundColor="red"
  39.                 width="100%"
  40.                 height="100%" />
  41.         <mx:VBox label="Orange"
  42.                 backgroundColor="haloOrange"
  43.                 width="100%"
  44.                 height="100%" />
  45.         <mx:VBox label="Yellow"
  46.                 backgroundColor="yellow"
  47.                 width="100%"
  48.                 height="100%" />
  49.         <mx:VBox label="Green"
  50.                 backgroundColor="haloGreen"
  51.                 width="100%"
  52.                 height="100%" />
  53.         <mx:VBox label="Blue"
  54.                 backgroundColor="haloBlue"
  55.                 width="100%"
  56.                 height="100%" />
  57.     </mx:Accordion>
  58.  
  59. </mx:Application>

同样的，你还可以将openDuration添加到一个扩展.CSS文件或者<mx:Style />块中，代码应该是类似于下面这样：

  1. <mx:Style>
  2.     Accordion {
  3.         openDuration: 800;
  4.     }
  5. </mx:Style>

还可以用ActionScript代码来实现设置openDuration样式：

  1. accordion.setStyle("openDuration", 800);
代码：Peter deHaan 翻译/整理/编译：minidxer

Topics: Flex | Tags: , , ,

Related Post

Leave a Comment

Name(*):

E-Mail(*) :

Website :

Comments :

Search Posts

Categories

Archives

Blogroll

Sponsored Ads