在前面的出色的Flex开源组件库FlexLib中，曾经提到FlexLib的Horizontal Accordion比较类似的，接下来的例子中演示了Accordion控件中如何通过设置openDuration样式设定打开/切换的时间长短。
让我们先来看一下Demo（可以右键View Source或点击这里察看源代码）：
下面是完整代码(或点击这里查看)：
- <?xml version="1.0" encoding="utf-8"?>
- <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
- layout="vertical"
- verticalAlign="middle"
- backgroundColor="white">
-
- <mx:Script>
- <![CDATA[
- private function init():void {
- slider.value = accordion.getStyle("openDuration");
- }
- ]]>
- </mx:Script>
-
- <mx:ApplicationControlBar dock="true">
- <mx:Form styleName="plain">
- <mx:FormItem label="openDuration:"
- direction="horizontal">
- <mx:HSlider id="slider"
- minimum="0"
- maximum="3000"
- liveDragging="true"
- snapInterval="100"
- tickInterval="500"
- dataTipPrecision="0" />
- <mx:Label text="{slider.value} ms" />
- </mx:FormItem>
- </mx:Form>
- </mx:ApplicationControlBar>
-
- <mx:Accordion id="accordion"
- openDuration="{slider.value}"
- creationPolicy="all"
- width="100%"
- height="100%"
- initialize="init();">
- <mx:VBox label="Red"
- backgroundColor="red"
- width="100%"
- height="100%" />
- <mx:VBox label="Orange"
- backgroundColor="haloOrange"
- width="100%"
- height="100%" />
- <mx:VBox label="Yellow"
- backgroundColor="yellow"
- width="100%"
- height="100%" />
- <mx:VBox label="Green"
- backgroundColor="haloGreen"
- width="100%"
- height="100%" />
- <mx:VBox label="Blue"
- backgroundColor="haloBlue"
- width="100%"
- height="100%" />
- </mx:Accordion>
-
- </mx:Application>
同样的，你还可以将openDuration添加到一个扩展.CSS文件或者<mx:Style />块中，代码应该是类似于下面这样：
- <mx:Style>
- Accordion {
- openDuration: 800;
- }
- </mx:Style>
还可以用ActionScript代码来实现设置openDuration样式：
- accordion.setStyle("openDuration", 800);
代码：Peter deHaan 翻译/整理/编译：minidxer
Related Post
