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

在前面的 出色的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">
7.     <mx:Script>
8.         <![CDATA[
9.             private function init():void {
10.                 slider.value = accordion.getStyle("openDuration");
11.             }
12.         ]]>
13.     </mx:Script>
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>
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>
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);