Flex中如何给Accordion创建一个简单按钮作为其头部的例子

By Minidxer | September 28, 2008

接下来的例子演示了Flex中如何给Accordion创建一个简单按钮作为其头部。

让我们先来看一下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.             [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>
代码：Peter deHaan 翻译/整理/编译：中文Flex例子

Topics: Flex | Tags: , ,

Related Post

Leave a Comment

Name(*):

E-Mail(*) :

Website :

Comments :

Search Posts

Categories

Archives

Blogroll

Sponsored Ads