Flex中Accordion用法

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.             [Bindable]
10.             [Embed(source="assets/Accordion.png")]
11.             private var AccordionIcon:Class;
12.  
13.             [Bindable]
14.             [Embed(source="assets/ApplicationControlBar.png")]
15.             private var ApplicationControlBarIcon:Class;
16.  
17.             [Bindable]
18.             [Embed(source="assets/Box.png")]
19.             private var BoxIcon:Class;
20.  
21.             [Bindable]
22.             [Embed(source="assets/Canvas.png")]
23.             private var CanvasIcon:Class;
24.  
25.             [Bindable]
26.             [Embed(source="assets/ControlBar.png")]
27.             private var ControlBarIcon:Class;
28.         ]]>
29.     </ mx:Script >
30.  
31.     < mx:Accordion   id = " accordion " backgroundAlpha = " 0.0 "
32.             height = " 100% "
33.             width = " 100% "
34.             headerHeight = " 32 "
35.             borderStyle = " none "
36.             historyManagementEnabled = " false " >
37.         < mx:headerRenderer >
38.             < mx:Component >
39.                 < mx:Button   fontWeight = " normal "
40.                         labelPlacement = " left "
41.                         textAlign = " left "
42.                         cornerRadius = " {outerDocument.accordion.getStyle('headerHeight')/2} "   />
43.             </ mx:Component >
44.         </ mx:headerRenderer >
45.  
46.         < mx:VBox   label = " Accordion "
47.                 icon = " {AccordionIcon} " >
48.             < mx:Label   text = " The quick brown fox... " />
49.         </ mx:VBox >
50.  
51.         < mx:VBox   label = " ApplicationControlBar "
52.                 icon = " {ApplicationControlBarIcon} " >
53.             < mx:Label   text = " The quick brown fox... " />
54.         </ mx:VBox >
55.  
56.         < mx:VBox   label = " Box "
57.                 icon = " {BoxIcon} " >
58.             < mx:Label   text = " The quick brown fox... " />
59.         </ mx:VBox >
60.  
61.         < mx:VBox   label = " Canvas "
62.                 icon = " {CanvasIcon} " >
63.             < mx:Label   text = " The quick brown fox... " />
64.         </ mx:VBox >
65.  
66.         < mx:VBox   label = " ControlBar "
67.                 icon = " {ControlBarIcon} " >
68.             < mx:Label   text = " The quick brown fox... " />
69.         </ mx:VBox >
70.     </ mx:Accordion >
71.  
72. </ mx:Application >

下面是一个简单的例子：

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:Style >
8.         AccordionHeader {
9.             paddingLeft: 130; /* pixels */
10.         }
11.     </ mx:Style >
12.  
13.     < mx:Accordion   id = " accordion "
14.             width = " 100% "
15.             height = " 100% " >
16.         < mx:VBox   label = " One " />
17.         < mx:VBox   label = " Two " />
18.         < mx:VBox   label = " Three " />
19.         < mx:VBox   label = " Four " />
20.     </ mx:Accordion >
21.  
22. </ mx:Application >

评论

1 楼 smithfox 2011-01-20  

恩, 这个是flex3(halo控件)的典型用法, 现在已经是flex4(spark控件), 连flex4.5都快出来啦, 呵呵, 我们可以用spark体系.
见 http://www.smithfox.com/?e=37