Flex中如何通过getHeaderAt()函数以及selectedUpIcon,selectedOverIcon和selectedDownIcon样式给Accordion头部设置一个分割用图标的例子

By Minidxer | May 1, 2009

接下来的例子演示了Flex中如何通过getHeaderAt()函数以及selectedUpIcon,selectedOverIcon和selectedDownIcon样式，给Accordion头部设置一个分割用图标。

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


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

Download: main.mxml
  1. <?xml version="1.0" encoding="utf-8"?>
  2. <mx:Application name="Accordion_getHeaderAt_selectedUpIcon_test"
  3.         xmlns:mx="http://www.adobe.com/2006/mxml"
  4.         layout="vertical"
  5.         verticalAlign="middle"
  6.         backgroundColor="white">
  7.  
  8.     <mx:Script>
  9.         <![CDATA[
  10.             import mx.controls.Button;
  11.  
  12.             [Embed("assets/bullet_red.png")]
  13.             private const RedIcon:Class;
  14.  
  15.             [Embed("assets/bullet_orange.png")]
  16.             private const OrangeIcon:Class;
  17.  
  18.             [Embed("assets/bullet_yellow.png")]
  19.             private const YellowIcon:Class;
  20.  
  21.             [Embed("assets/bullet_green.png")]
  22.             private const GreenIcon:Class;
  23.  
  24.             [Embed("assets/bullet_blue.png")]
  25.             private const BlueIcon:Class;
  26.  
  27.             [Embed("assets/bullet_star.png")]
  28.             private const StarIcon:Class;
  29.  
  30.             private function init():void {
  31.                 var idx:uint;
  32.                 var len:uint = accordion.numChildren;
  33.                 var btn:Button;
  34.                 for (idx=0; idx<len; idx++) {
  35.                     btn = accordion.getHeaderAt(idx);
  36.                     btn.useHandCursor = true;
  37.                     btn.buttonMode = true;
  38.                     btn.setStyle("selectedUpIcon", StarIcon);
  39.                     btn.setStyle("selectedOverIcon", StarIcon);
  40.                     btn.setStyle("selectedDownIcon", StarIcon);
  41.                 }
  42.             }
  43.         ]]>
  44.     </mx:Script>
  45.  
  46.     <mx:Accordion id="accordion"
  47.             openDuration="0"
  48.             width="100%"
  49.             height="100%"
  50.             creationComplete="init();">
  51.         <mx:VBox id="redVbox"
  52.                 label="Red"
  53.                 icon="{RedIcon}" />
  54.         <mx:VBox id="orangeVbox"
  55.                 label="Orange"
  56.                 icon="{OrangeIcon}" />
  57.         <mx:VBox id="yellowVbox"
  58.                 label="Yellow"
  59.                 icon="{YellowIcon}" />
  60.         <mx:VBox id="greenVbox"
  61.                 label="Green"
  62.                 icon="{GreenIcon}" />
  63.         <mx:VBox id="blueVbox"
  64.                 label="Blue"
  65.                 icon="{BlueIcon}" />
  66.     </mx:Accordion>
  67.  
  68. </mx:Application>
代码：Peter deHaan 翻译/整理/编译：中文Flex例子

Topics: Accordion | No Comments » | Tags: , , , ,

你可能还对下列文章感兴趣:

Leave a Comment

Name(*):

E-Mail(*) :

Website :

Comments :

Search Posts

Categories

Archives

Blogroll